Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@tiaanduplessis/react-progressbar

tiaanduplessis297MIT1.0.0

Little React wrapper around progressbar.js

readme

react-progressbar

Little React wrapper around progressbar.js

JavaScript Style Guide

Install

npm install --save @tiaanduplessis/react-progressbar

Usage

import { Circle, Line } from '@tiaanduplessis/react-progressbar'
const Example = () => {
  return <>
          <Circle
            style={{ width: '200px' }}
            progress={10 / 100}
            color={'red'}
            trailColor={'pink'}
            strokeWidth={4}
            easing='easeInOut'
            text={{
              value: 'Example',
              style: {
                color: '#515251',
                position: 'absolute',
                left: '50%',
                top: '50%',
                textAlign: 'center',
                padding: 0,
                margin: 0,
                transform: {
                  prefix: true,
                  value: 'translate(-50%, -50%)'
                }
              }
            }}
          />


        <Line
          progress={10/100}
          strokeWidth={4}
          easing='easeInOut'
          color={'blue'}
          trailColor='orange'
          svgStyle={{
            display: 'block',
            width: '100%',
            'max-height': '1em',
            'border-radius': '20px'
          }}
          text={{
            className: 'dashboard-tile-line-progress-text',
            style: {
              color: '#515251',
              padding: 0,
              margin: 0
            }
          }}
        />


        <SemiCircle
          strokeWidth={6},
          color={'#FFEA82'},
          trailColor='#eee',
          trailWidth={1},
          easing='easeInOut',
          duration={1400},
          svgStyle=null,
          text= {
            value: '',
            alignToBottom: false
          }
        />
  </>
}

Props

Property Type Description Default Value
color string Stroke color '#555'
strokeWidth number Width of the stroke 1.0
trailColor string Color for lighter trail stroke '#f4f4f4'
trailWidth number Width of the trail stroke. Trail is always centered relative to actual progress path. same as strokeWidth
svgStyle object Inline CSS styles for the created SVG element null
text object Text options null
fill string Fill color for the shape. If null, no fill. null
duration number Duration for animation in milliseconds 800
easing string Easing for animation 'linear'
from object For custom animations: Built-in shape passes reference to itself and a custom attachment object to step function none
to object For custom animations: Built-in shape passes reference to itself and a custom attachment object to step function none
step function For custom animations: Built-in shape passes reference to itself and a custom attachment object to step function none
warnings boolean Function called when user taps the view area false

License

MIT © tiaanduplessis

Created using create-react-hook.