react-gradient-progress-stack

Circular progress bar with stacked progress Circular progress bar with donut pie

Install

  npm i @hammaadhrasheedh/react-circular-gradient-progress-stack

Usage

import React, { Component } from 'react'

import { CircleProgress, PieProgress } from '@hammaadhrasheedh/react-circular-gradient-progress-stack'
import { easeSinOut } from 'd3-ease'

class Example extends Component {
  render() {
    return 
      <div>
        <CircleProgress
            concentric={true} 
            width={260}
            easingFunction={ easeSinOut }
            values={[
              {percentage:90, strokeWidth:20, primaryColor:['#BC94FF', '#9F66FF']},
              {percentage:50, strokeWidth:20, primaryColor:['#FF94CE', '#DA2770']},
              {percentage:10, strokeWidth:20, primaryColor:['#89E8F5', '#0F72E8']},
            ]}
        />

        <CircleProgress
            concentric={false} 
            width={260}
            easingFunction={ easeSinOut }
            values={[
              {percentage:90, strokeWidth:20, primaryColor:['#BC94FF', '#9F66FF']},
              {percentage:50, strokeWidth:20, primaryColor:['#FF94CE', '#DA2770']},
              {percentage:10, strokeWidth:20, primaryColor:['#89E8F5', '#0F72E8']},
            ]}
        />

        <PieProgress
          width={260}
          strokeWidth={20}
          easingFunction={ easeSinOut }
          values={[
            {percentage:30, primaryColor:['#BC94FF40', '#9F66FF40']},
            {percentage:20, primaryColor:['#FF94CE40', '#DA277040']},
            {percentage:20, primaryColor:['#FF94CE40', '#DA277040']},
            {percentage:30, primaryColor:['#FF94CE40', '#DA277040']},
          ]}
        />
      </div>
  }
}