react-gradient-progress

Simple and light circular progressbar in react with a gradient

$15

867 downloads
prasanna

React Gradient Progress

Simple and light circular progressbar with gradient

React gradient progress bar

JavaScript Style Guide

Installation

Using npm via terminal

$ npm login --registry https://r.privjs.com
$ npm i -S react-gradient-progress --registry https://r.privjs.com

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

  1. Add .npmrc file to your project root with the following line: //r.privjs.com/:_authToken=${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} />

Props

NameDescription
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.