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/