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