@paprika/progress-bar
Description
ProgressBar is a component that shows the current progress of an action
Installation
yarn add @paprika/progress-bar
or with npm:
npm install @paprika/progress-bar
Props
ProgressBar
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. |
| bodyText | string | false | null | Description for the ProgressBar |
| completed | number | false | 0 | Specifies how much progress has been completed from 0-100 |
| header | node | false | null | Text for the heading displayed above ProgressBar |
| headerLevel | [ 1, 2, 3, 4, 5, 6] | false | 3 | Semantic heading level of header |
| isCompact | bool | false | false | If ProgressBar is displayed in a compact style |
Usage
import ProgressBar from "@paprika/progress-bar";
<ProgressBar
header="Preparing your file..."
bodyText="Control attributes are getting updated. This might take more than 15secs."
completed={30}
/>;