A modern approach to an progress components for React

import React from 'react'

function App() {

  let options = {
    width: 150,
    height: 10,
  }

  return (
    <ProgressBar
      percent={100}
      options={options}
    />
  )
}

Install

npm

npm install --save progresses

Contribution

Do you like what we made? Support it by donating, creating an issue or pull request.

API

Props

percent: number (required)

• default: 0

• used as fill percentage

className: string

• additional styling

options: BarOptions, CircleOptions

• additional options

BarOptions

width: number

• default: 100

• width of the bar in px

height: number

• default: 10

• height of the bar in px

orientation: 'horizontal', 'vertical'

• default: horizontal

• determines orientation

showPercent: boolean

• default: false

• shows percent indicator

colors: OptionsColors

• customizable colors

CircleOptions

size: number

• default: 100

• diameter of the circle in px

strokeWidth: number

• default: 7

• thickness of the circle in px

orientation: 'horizontal' | 'vertical'

• default: horizontal

• determines orientation

showPercent: boolean

• default: false

• shows percent indicator

colors: OptionsColors

• customizable colors

OptionsColors

back: string

• default: rgba(200, 200, 200, 0.8)

• background color

fill: string

• default: rgba(20, 20, 20, 0.8)

• percentage fill color

anim: string

• default: rgba(200, 10, 10, 0.8)

• animation fill color

Patch notes

A log of recent updates and notes can be found here

Road map

The future plans are under deliberation within the core team.

License

This project is licensed under the terms of the MIT license