A React component that displays a customisable circular progress gauge.
This component displays a circular progress gauge, useful for displaying progress on a completeable action, like:
- “you’re on step 3/10”, or
- “you're 30% there”
- The graphic is drawn using HTML5 canvas.
- Optimised to natively draw at the correct pixel density for the user's screen.
- Tweakable props to set various colours and layout metrics.
- Animatable between steps.
- Have a look at this storybook.
Install with yarn…
yarn add react-radial-progress-indicator
…or npm:
npm install react-radial-progress-indicator
import React, { Component } from 'react'
import RadialProgressIndicator from 'react-radial-progress-indicator';
class MyComponent extends Component {
render() {
return (
<RadialProgressIndicator
width={100}
height={100}
steps={10}
step={3}
/>
)
}
}