react-progressbar-fancy
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

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

fancy-progressbar

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/

Package Sidebar

Install

npm i react-progressbar-fancy

Weekly Downloads

212

Version

1.1.4

License

MIT

Unpacked Size

40.6 kB

Total Files

10

Last publish

Collaborators

  • ravinrau