Progress-bar
Progress Bar component is a visual indicator that displays the progression of a task or process. It provides users with a clear visual representation of the completion status, making it easier to track and understand ongoing activities.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Usage
import { ProgressBar } from 'bio-bind-ui';<ProgressBar
maxValue={100}
mode='light'
showPercent
size='md'
type='line'
value={50}
variant='primary'
/>Examples
Type (optional)
Use type to select a line or circle progress bar.
Size (optional)
Use size to determine the size of the progress bar.
Mode (optional)
Use mode to use dark or light.
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| variant | false | primary | primary | The visual color variant of the progress bar. |
| size | false | md | xs, sm, md, lg, xl | The size of progress bar component (xs, sm, md, lg, xl). |
| type | false | line | line , circle | The type variant of the progress bar (line, circle). |
| showInfo | false | false | boolean | If true, the progress information will be assigned to the progress bar. |
| mode | false | light | light dark | The theme mode of the progress bar (light or dark). |
| value | false | 0 | number | Value information from the progress bar. |
| maxValue | false | 100 | number | Maximal value information from the progress bar. |
| showPercent | false | true | boolean | If true, the percentage information will be assigned to the progress bar. |