Progress React Component

Install

npm install --save @idui/react-progress

yarn add @idui/react-progress

Circular Progress

• Docs
• Playground
• you can configure custom icons for circular progress (install @idui/react-icon and configureIcons)
• "progressCircle", "longLinesProgressCircle" and "shortLinesProgressCircle" are available by default

import React from 'react'
import { CircularProgress } from '@idui/react-progress'

function Example() {
  return <CircularProgress 
      name="longLinesProgressCircle" // default progressCircle
      color="orangered" // default #9552D4
      size="3.5rem"  // default 3rem
      duration={1000} // default 1500
  />
}

Linear Progress

• Docs
• Playground

import React from 'react'
import { LinearProgress } from '@idui/react-progress'

function Example() {
  return <LinearProgress
      color="orangered" // default #9552D4
      duration={1000} // default 1500
      length="50rem" // default 100%
      orientation="vertical" // default "horizontal"
      size="1rem" // default 0.5rem
  />
}

License

MIT © [email protected]