/react-gradient-progress

Simple light circular progress bars in react with gradient.

Primary LanguageJavaScript

React Gradient Progress

Simple and light gradient-enabled circular progressbar for reactjs/nextjs

React Gradient Progress

NPM JavaScript Style Guide

Installation

Using npm

npm i -s react-gradient-progress

Basic Usage

import {CircleProgress} from 'react-gradient-progress'

<CircleProgress percentage={75} strokeWidth={8} />

Props

Name Description
percentage Percentage progress. Required.
width Width of the progressbar container in px. Default: 200.
strokeWidth The stroke width of the progress bar. Default: 5.
strokeLinecap Stroke linecap type. Default: 'round'. Accepted values: 'butt', 'round', 'square'
fontSize The size of the percentage text. Default: '30px'.
fontColor The color of the font. Default: 'inherit'.
fontFamily Font family. Default: inherit.
primaryColor The Gradient color. Should be an array of size 2. Default: ['#00BBFF', '#92d7f1'].
secondaryColor The color of the uncovered percentage. Default: 'transparent'.
fill Color to fill in the progressbar. Default: 'transparent'.

Read more

https://medium.com/better-programming/build-beautiful-gradient-enabled-circular-progress-bars-in-react-d0a746deed0

Buy me a coffee if you like this repo

Send me a tip

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT