Components
Progress
Token-driven linear progress indicator for determinate and indeterminate loading.
Modes
Determinate progress uses value and max to compute the filled width.
Indeterminate progress ignores both and animates a loading segment across the
track.
Usage
import { Progress } from '@cajon-ui/react';
<Progress value={28} showValue />
<Progress value={64} tone="success" size="lg" showValue />
<Progress indeterminate tone="info" />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | 0 | Current progress value |
max | number | 100 | Maximum progress value |
tone | primary | success | warning | error | info | primary | Fill color |
size | sm | md | lg | md | Track height |
indeterminate | boolean | false | Animated loading state |
showValue | boolean | false | Renders a percentage label |