> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Progress

> Linear progress indicator.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/progress-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=4848289e864e1dfd6488374b1f74472f" alt="Progress component preview (light)" width="240" data-path="images/ui/progress-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/progress.tsx`

## When to use

* Indicate completion percentage of a determinate process (0–100).
* For indeterminate loading, use a Spinner or Skeleton.

## Usage

```tsx sabo/src/components/ui/progress.tsx theme={null}
import { Progress } from "@/components/ui/progress";

export function Example() {
  return <Progress value={42} className="w-64" />;
}
```

## Key props

<ParamField path="value" type="number">
  Progress percent (0–100). The bar translates based on this value.
</ParamField>

<ParamField path="className" type="string">
  Width/height or color overrides (e.g., <code>w-64</code>, <code>h-3</code>).
</ParamField>

## Styling tip

* Increase thickness via <code>h-3</code> or <code>h-4</code>.
* Use contextual color by wrapping in themed containers or adjusting <code>bg-primary</code>.

## Accessibility

* Provide nearby text for context (“Uploading 42%”).
* If used as a status, associate with an element describing the task.