A React component that displays a customisable circular progress indicator.

The indicator can display segmented steps (like “you’re on step 3/10”), or a smooth sweep to any position around the ring (useful when progress is measured as a percentage).

• Lightweight: ~2kb when minified and gzipped. No runtime dependencies.
• Responsive: draws natively at the pixel density of your screen using HTML5 canvas.
• Tweakable: colours, layout metrics, and text can be fine-tuned for your layout.
• Animatable: animates between steps with customisable speed.

Install with yarn…

yarn add react-radial-progress-indicator 

…or npm:

npm install react-radial-progress-indicator 

For examples and usage, have a look at this storybook.

import React from 'react' import { RadialProgress } from 'react-radial-progress-indicator'; const UsageExample = (props) => { return ( <RadialProgress width={100} height={100} steps={10} step={3} /> ); );

See the jsx tab in the storybook for more usage examples.

A full list of props available to customise the component can be found here: docs/api.md