Simple and light circular progressbar in react with a gradient



React Gradient Progress

Simple and light circular progressbar with gradient

React gradient progress bar

JavaScript Style Guide


Using npm via terminal

$ npm login --registry
$ npm i -S react-gradient-progress --registry

Using CI/CD environments such as Netlify, Zeit, Travis CI, etc.

  1. Add .npmrc file to your project root with the following line: //${NPM_TOKEN}
  2. Set environment variable NPM_TOKEN with your PrivJs Token in your preferred CI/CD environment
  3. That's all

Tutorial: Netlify, CI/CD Workflow, Github Actions, NpmJs

Basic Usage

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

<CircleProgress percentage={90} />


percentagePercentage progress. Required.
widthWidth of the progressbar container in px. Default: 200.
strokeWidthThe stroke width of the progress bar. Default: 5.
strokeLinecapStroke linecap type. Default: 'round'. Accepted values: 'butt', 'round', 'square'
fontSizeThe size of the percentage text. Default: '30px'.
fontColorThe color of the font. Default: 'inherit'.
fontFamilyFont family. Default: inherit.
primaryColorThe Gradient color. Should be an array of size 2. Default: ['#00BBFF', '#92d7f1'].
secondaryColorThe color of the uncovered percentage. Default: 'transparent'.
fillColor to fill in the progressbar. Default: 'transparent'.

Monetize your
open-source work

Supercharge your OSS projects by selling npm packages. Get started in just 5 minutes.