THEME
MOTION
HAPTIC
SOUND
PROGRESSBAR
Continuous horizontal bar for determinate progress. Omit `value` for an indeterminate shimmer.
Live demo
Import
import { ProgressBar } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | — | 0–1. Omit for indeterminate. |
accent | 'info'|'success'|'warning'|'danger'|'accent' | success | — | |
height | number | 6 | — | |
showValue | boolean | false | — |
Examples
value
<ProgressBar value={0.42} showValue />indeterminate
<ProgressBar />Accessibility
Role: progressbar
- aria-label (default "Progress")
- aria-valuenow set automatically
Feedback
| Haptic | none |
| Sound | none |
Motion states
shimmer