react-customizable-progressbar

Customizable circular SVG progress bar component for React.

react-customizable-progressbar

View Demo View Github

Installation

npm install --save react-customizable-progressbar
Bash

or

yarn add react-customizable-progressbar
Bash

Usage

import ProgressBar from 'react-customizable-progressbar'

<ProgressBar
    progress={60}
    radius={100}
/>
React JSX

Props

Name Type Default Description
radius (required) number 100 Progress bar radius
progress (required) number 0 Progress value (out of steps)
steps number 100 Total steps
cut number 0 Angle of the circle sector
rotate number -90 Progress rotation
strokeWidth number 20 Stroke width
strokeColor string 'indianred' Stroke color
strokeLinecap string 'round' Stroke line cap
transition string '0.3s ease' Transition
trackStrokeWidth number 20 Track stroke width
trackStrokeColor string '#e6e6e6' Track stroke color
trackStrokeLinecap string 'round' Track stroke line cap
trackTransition string '1s ease' Track transition
pointerRadius number 0 Pointer radius
pointerStrokeWidth number 20 Pointer stroke width
pointerStrokeColor string 'indianred' Pointer stroke color
pointerFillColor string 'white' Pointer fill color
initialAnimation bool false Initial animation
initialAnimationDelay number 0 Initial animation delay
inverse bool false Inverse
counterClockwise bool false Counter-clockwise
children node null Children - pass anything to show inside progress bar
className string null Progress bar class name

Styles

.RCP {}
.RCP__track {}
.RCP__progress {}
.RCP__pointer {}
CSS

You can use these default indicator styles to center it both horizontally and vertically:

.your-indicator {
    display: flex;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    user-select: none;
}
CSS

Run examples locally

npm install
npm run dev
Bash

GitHub

martyan/react-customizable-progressbar

6521

Customizable circular progress bar component for React :doughnut: — Read More

https://martinjuzl.com/react-customizable-progressbar

Latest commit to the master branch on 10-26-2024
Download as zip