@idui/react-progress

React Progress Component

Usage no npm install needed!

<script type="module">
  import iduiReactProgress from 'https://cdn.skypack.dev/@idui/react-progress';
</script>

README

Progress React Component

NPM Size JavaScript Style Guide LICENSE

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

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 © kaprisa57@gmail.com