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

Install with npm:

or yarn:

Import the component with just one line of code

import {ProgressBar} from "react-progressbar-fancy";

Now you can use the component:

<ProgressBar score={25}/>

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: `''`.

You can take some inspiration for your custom gradient colors from https://uigradients.com/