Package Exports

react-customizable-progressbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-customizable-progressbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 Bar from 'react-customizable-progressbar'

<Bar
    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`	`500`	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

.progress-bar {}
.progress-bar-track {}
.progress-bar-progress {}
.progress-bar-pointer {}

Development

npm install
npm run dev