Skip to main content

AtomProgressBar

A Progress bar is a visual representation of a specified wait time or the current status of a process.

Installation​

$ npm install @s-ui/react-atom-progress-bar --save

Usage​

After importing the component AtomProgressBar like this

import AtomProgressBar from '@s-ui/react-atom-progress-bar'

Basic usage​

<AtomProgressBar percentage={25} />

Indicator text at Bottom​

<AtomProgressBar percentage={25} indicatorBottom />

Indicator style (75/100)​

<AtomProgressBar percentage={25} indicatorTotal />

Line double bar​

<AtomProgressBar
  mainBarPercentage={25}
  extraBarPercentage={50}
  type="lineDoubleBar"
/>

Find full description and more examples in the demo page.