Nuanced Pumpkin Mavens

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

    1.1.4 • Public • Published

    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>
      }
    }

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    3

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    79.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • hammaadhrasheedh