React-customizable-progressbar NPM

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

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;
}