---
title: Progress
description: Show percent completion with a progress bar
name: progress
component: Progress
package: progress
demoName: Progress
---

<HeroContainer showAnimationDriverControl>
  <ProgressDemo />
</HeroContainer>

```tsx hero template=Progress

```

<Highlights
  features={[
    'Sizable, themeable, animatable.',
    'Compound component API for complete control.',
    <span>
      Adheres to the{' '}
      <Link href="https://www.w3.org/TR/wai-aria-1.2/#progressbar">
        progressbar role requirements
      </Link>
    </span>,
  ]}
/>

## Installation

Progress is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/progress
```

## Usage

The `value` property controls the percent, but you can override it by adjusting the `x` property.

```tsx
import { Button, Progress } from 'tamagui'

export default () => (
  <Progress value={60}>
    <Progress.Indicator transition="bouncy" />
  </Progress>
)
```

## API Reference

### Progress

Progress extends [ThemeableStack](/docs/components/stacks#themeablestack), getting [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'size',
      required: false,
      type: '"small" | "large"',
      description: `Size preset for the progress bar.`,
    },
    {
      name: 'value',
      required: false,
      type: 'number | null',
      description: `Controls the percent progress.`,
    },
    {
      name: 'max',
      required: false,
      type: 'number',
      description: `Maximum value for calculating the percentage.`,
    },
    {
      name: 'unstyled',
      required: false,
      type: 'boolean',
      description: `When true, removes all default styles.`,
    },
  ]}
/>

### Progress.Indicator

`Progress.Indicator` extends [ThemeableStack](/docs/components/stacks#themeablestack), getting [Tamagui standard props](/docs/intro/props).

<PropsTable
  data={[
    {
      name: 'unstyled',
      required: false,
      type: 'boolean',
      description: `When true, removes all default styles.`,
    },
  ]}
/>