Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

README.md

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

About

Simple light circular progress bars in react with gradient.

Resources

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •