Partials·loomora/ProgressBar
ProgressBar
Displays a value relative to an upper bound and can include a label and accessible textual value.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { ProgressBar } from 'loomora'
<ProgressBar value={7} outOf={10} showValueAsText label="Build progress" />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Current progress amount. |
| outOf | number | 100 | Maximum progress amount. |
| label | ReactNode | — | Optional visible progress label. |
| showValueAsText | boolean | false | Shows the progress as text. |
| barColor | string | config default | Tailwind class for the filled bar. |