ravinrau / 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

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/