react-radial-progress-bar

Radial Progress Bar

This is a simple and stylable radial progress bar. It is entirely made on react. Light weight and fully optimised for current functionalities.

Installation

Use the package manager npm to install react-radial-progress-bar.

npm install react-radial-progress-bar

Usage

import RPB from 'react-radial-progress-bar';

<RPB
    size={120} // in px. default 120px
    percentageCompleted={89} // current percentage filled in progress bar
    fillColor={'blue'} // default #97a71d
    backgroundColor={'#d6dadc'} /> // default #d6dadc

Use gradients to enhance the look of radial progress bar

import RPB from 'react-radial-progress-bar';

<RPB
    size={120}
    percentageCompleted={89}
    fillColor={'linear-gradient(45deg, #E6465D, #F5A746)'}
    backgroundColor={'white'} />

Animations on changing the percentageCompleted prop

Below is the demo