Progress
A progress bar.
value is the fill from 0 to 100; values outside are clamped. size sets the bar thickness, and background: false hides the track. Change the fill color with barClassName.
Live example
Example controls
Usage
import { Progress } from '@prosazhin/pbcomponents';
<Progress
value={40}
size='s'
/>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
value | number | Fill from 0 to 100. | 0 |
size | 'xs' | 's' | 'm' | 'l'xs · s · m · l | Component size. | m |
background | boolean | Shows the track behind the bar. | true |
barClassName | string | Class of the filled bar. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.