---
title: Progress
description: A determinate or indeterminate progress bar.
---
import Source from './_generated/progress.mdx';

A linear progress bar. Android draws the MD3 4px track with the primary indicator and a dual-segment indeterminate animation; iOS draws the thin UIProgressView-style track. Set `value` for determinate progress, or `indeterminate` for continuous activity.

<DemoFrame component="progress" />

## Installation

```bash
npx touchcn add progress
```

## Usage

<CodeGroup>

```html Angular
<tcn-progress [value]="62" />
<tcn-progress indeterminate />
```

```tsx React
import { TcnProgress } from '@/components/ui/progress';

<TcnProgress value={62} />
<TcnProgress indeterminate />
```

```vue Vue
<script setup lang="ts">
import { TcnProgress } from '@/components/ui/progress';
</script>

<template>
  <TcnProgress :value="62" />
  <TcnProgress indeterminate />
</template>
```

</CodeGroup>

The bar carries `role="progressbar"` with `aria-valuemin` / `aria-valuemax` / `aria-valuenow`; the value attributes are omitted while indeterminate.

## Props

| Prop            | Type      | Default | Description                              |
| --------------- | --------- | ------- | ---------------------------------------- |
| `value`         | `number`  | `0`     | Completion 0–100 (determinate).          |
| `indeterminate` | `boolean` | `false` | Run the continuous animation.            |

<Source />