Components
Progress
Displays a progress bar indicating how far along a task is.
Category: Feedback / Standalone
Import from @hareru/ui:
import { Progress } from "@hareru/ui"Exports
| Export | Description |
|---|---|
Progress | Root progress bar. Automatically renders the inner indicator |
ProgressIndicator | Inner fill element (included automatically; export available for advanced use) |
Key Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current progress value (0–100) |
Standard HTML attributes for <div> are also accepted.
Structure
- ProgressIndicator
[indicator]
(expected) = recommended in canonical composition, not runtime-required.
Accessibility
- Roles:
progressbar - ARIA attributes:
aria-valuenow,aria-valuemin,aria-valuemax - Notes: Indeterminate state omits aria-valuenow.
Usage
import { Progress } from "@hareru/ui"
<Progress value={60} />Indeterminate state (no value):
<Progress />Dynamic value from state:
const [progress, setProgress] = useState(0)
<Progress value={progress} />