> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Progress

A linear bar for an operation you can measure, or a long or multi-step one where watching it advance is the reassurance — a short in-context wait is a `Loader`, and a page loading a known layout is `Skeleton`. `value={null}` makes it indeterminate: use that rather than a spinner for a long wait you cannot measure, switch to a real number the moment you can, and never fake a percentage. Linear only — the system has no circular progress, so do not hand-roll a ring.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Progress) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/loading-progress--overview)

```tsx
import { Progress } from '@wallarm-org/design-system/Progress';

export const Basic = () => (
  <div className='w-280'>
    <Progress />
  </div>
);
```

## Usage

```tsx
import { Progress } from '@wallarm-org/design-system/Progress';
```

## Examples

### Sizes

`xs` through `lg`. A thin bar belongs in an inline row; the heavier ones are for an operation the screen is actually about.

```tsx
import { Progress } from '@wallarm-org/design-system/Progress';

export const Sizes = () => (
  <div className='flex w-[360px] flex-col gap-16'>
    {sizeRows.map(({ size, label, value }) => (
      <div key={size} className='flex items-center gap-16'>
        <Progress value={value} size={size} className='flex-1' />
      </div>
    ))}
  </div>
);
```

### With label

`showLabel` prints the percentage — worth it on a long or standalone job where the number reassures, noise on a thin inline bar.

```tsx
import { Progress } from '@wallarm-org/design-system/Progress';
import { VStack } from '@wallarm-org/design-system/Stack';

export const WithLabel = () => (
  <div className='w-280'>
    <VStack>
      <Progress value={20} showLabel />
      <Progress value={40} showLabel size='sm' />
      <Progress value={60} showLabel size='md' />
      <Progress value={80} showLabel size='lg' />
    </VStack>
  </div>
);
```

### Colors

The full palette, though `brand` is the default for a reason: reach for another only when the colour says something true about the job, such as red for one that is failing.

```tsx
import { ProgressColorEnum, Progress } from '@wallarm-org/design-system/Progress';

export const Colors = () => (
  <div className='flex w-[360px] flex-col gap-16'>
    {Object.entries(ProgressColorEnum).map(([key, color], index) => (
      <div key={color} className='flex items-center gap-16'>
        <Progress
          value={index + 1}
          max={Object.entries(ProgressColorEnum).length}
          color={color}
          size='sm'
          className='flex-1'
        />
      </div>
    ))}
  </div>
);
```

### Indeterminate

`value={null}` cycles the range instead of filling it, which is the honest way to show a long wait you cannot measure.

```tsx
import { Progress } from '@wallarm-org/design-system/Progress';

export const Indeterminate = () => (
  <div className='w-280'>
    <Progress value={null} />
  </div>
);
```

## Props

| Prop        | Type                          | Default | Description                                                  |
| ----------- | ----------------------------- | ------- | ------------------------------------------------------------ |
| value       | `number \| null \| undefined` |         | Progress value (0–max). Pass `null` for indeterminate state. |
| min         | `number \| undefined`         | `0`     |                                                              |
| max         | `number \| undefined`         | `100`   |                                                              |
| size        | `ProgressSize \| undefined`   | `xs`    |                                                              |
| color       | `ProgressColor \| undefined`  | `brand` |                                                              |
| showLabel   | `boolean \| undefined`        | `false` |                                                              |
| data-testid | `string \| undefined`         |         |                                                              |