React-Progressbar-Fancy
A fancy progress bar component, with gradient styling and some amazing animation. You are able to add your own custom gradient colors
Testing
You can check out and play around with the component in codepen https://codesandbox.io/s/summer-flower-i8wni?file=/src/App.js
Installation
Install with npm:
npm install react-progressbar-fancy
or yarn:
yarn add react-progressbar-fancy
Usage
Import the component with just one line of code
import {ProgressBar} from "react-progressbar-fancy";
Now you can use the component:
<ProgressBar score={25}/>
Props
Name | Description |
---|---|
score |
Progression value of the progressbar. Required. |
label |
Label text of the progressbar. Default: ''
|
progressWidth |
The width of the progressbar. Default: '' . |
hideText |
To show only progressbar and remove all text. Default: false . |
darkTheme |
Change the color of the text to black. Default: false . |
progressColor |
Some present gradient colors to choose from. 'red','green','blue','purple' . Default: 'red' . |
primaryColor |
To add custom color for the progressbar. Advice to use both primaryColor and secondaryColor. Default: '' . |
secondaryColor |
To add custom color for the progressbar. Advice to use both primaryColor and secondaryColor. Default: '' . |
disableGlow |
Remove glow effect of the progressbar. Default: false . |
className |
to add extra styles. Default: '' . |
Extras
You can take some inspiration for your custom gradient colors from https://uigradients.com/