> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Progress
> A horizontal bar that visually communicates task completion or loading state — supports 4 semantic color variants and 3 sizes.
## Overview
**Progress** displays a determinate (known value) or indeterminate (loading) progress bar. Semantic color variants communicate the meaning of the progress state.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Progress } from "@araf-ds/core"
export default function Example() {
return
}
```
***
## Variants
### Default
```tsx theme={null}
```
### With Label
```tsx theme={null}
```
### Semantic Variants
```tsx theme={null}
```
### Sizes
```tsx theme={null}
```
| Size | Height | Use case |
| ------ | ------ | ------------------------------------ |
| Small | 4px | Compact UI, table cells |
| Medium | 8px | Default — most contexts |
| Large | 12px | Prominent upload/download indicators |
***
## API Reference
Progress value from 0 to `max`. Omit for indeterminate animation.
Maximum value (100 = full).
Semantic fill color. Values: `default` · `success` · `warning` · `error`
Bar height. Values: `sm` · `md` · `lg`
Displays a percentage label above the bar.
Custom label text. Overrides the auto-generated percentage.
Additional Tailwind classes for custom overrides.
***
## Accessibility
* Progress uses `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`
* Indeterminate state (no `value`) uses `aria-valuenow` omitted per ARIA spec
* Label text is referenced via `aria-label` or `aria-labelledby`
* Color alone does not convey meaning — always pair variant colors with a label
* Do not rely on animation alone for indeterminate state; add an `aria-label` like "Loading"
***
## Do's & Don'ts
* Use `variant="success"` when a task completes successfully
* Use `variant="warning"` for high-usage alerts (storage, quota)
* Always show a label when the progress value matters to the user
* Use indeterminate mode when the duration is unknown
* Don't use color alone to indicate status — always pair with a label
* Don't use Progress for interactive input — use Slider instead
* Don't show multiple progress bars for the same task simultaneously
* Don't display a Progress bar for actions under 300ms — it creates visual noise