progress-bar.md

ProgressBar

Source

An animated progress bar that can show an actions progress or an indeterminate state like a loading spinner.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { ProgressBar } from 'chayns-components';

// ...

<ProgressBar {...} />

Props

The ProgressBar-component takes the following props:

Name	Type	Default	Required
value	number
children	ReactNode
ready	boolean	false

value

value?: number

The progress in percent (0 - 100).

---

children

children?: ReactNode

A label that is shown beneath the progress bar.

---

ready

ready?: boolean

When toggled on it will hide the progress bar in an animated transition and only show its children.