---
title: "ProgressBar"
description: "How far a task has gone: a bar that fills, with its label and value, or a moving bar while the share is unknown. Use UploadProgress for files on their way."
---

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

# ProgressBar

## Beside the numbers it sums up

Without a visible label, the bar takes an aria-label; the text beside it says the same.

```tsx
import { ProgressBar } from '@arbol-ai/ui';

<div className="flex max-w-sm items-center gap-2.5">
  <ProgressBar aria-label="Assessments passed" className="flex-1" maxValue={5} value={3} />
  <span className="text-muted-foreground shrink-0 text-xs font-medium tabular-nums">
    3 of 5 passed
  </span>
</div>
```

## With a label

The value shows as a percentage, or in the app’s words with valueLabel.

```tsx
import { ProgressBar } from '@arbol-ai/ui';

<div className="grid max-w-sm gap-4">
  <ProgressBar label="Importing contacts" maxValue={300} value={120} valueLabel="120 of 300" />
  <ProgressBar label="Calling the waiting list" value={65} />
</div>
```

## Unknown share

```tsx
import { ProgressBar } from '@arbol-ai/ui';

<ProgressBar className="max-w-sm" isIndeterminate label="Preparing the file" />
```

## Source

The examples above are [`src/components/progress-bar/progress-bar.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/progress-bar/progress-bar.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/feedback/progress-bar/index.mdx