react-customizable-progressbar
Customizable circular SVG progress bar component for React
Check examples or generator to play around with all props
Installation
npm install --save react-customizable-progressbar
or
yarn add react-customizable-progressbar
Usage
import ProgressBar from 'react-customizable-progressbar';
<ProgressBar progress={60} radius={100} />;
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 | '' | Progress bar class name |
Styles
.RCP {
}
.RCP__track {
}
.RCP__progress {
}
.RCP__pointer {
}
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;
}
Run examples locally
npm install
npm run dev
