---
id: progress-linear
title: Progress - Linear
description: An element that shows either determinate or indeterminate progress.
---

<ComponentPreview id="ProgressLinear" />

## Anatomy

<Anatomy id="linear-progress" />

```tsx
<Progress.Root>
  <Progress.Label />
  <Progress.ValueText />
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
</Progress.Root>
```

## Examples

<Example id="basic" />

### Min and Max

By default, the maximum is `100`. If that's not what you want, you can easily specify a different bound by changing the
value of the `max` prop. You can do the same with the minimum value by setting the `min` prop.

For example, to show the user a progress from `10` to `30`, you can use:

<Example id="min-max" />

### Indeterminate

The progress component is determinate by default, with the value and max set to 50 and 100 respectively. To render an
indeterminate progress, you will have to set the `value` to `null`.

<Example id="indeterminate" />

### Value Text

Progress bars can only be interpreted by sighted users. To include a text description to support assistive technologies
like screen readers, use the `value` part in `translations`.

<Example id="value-text" />

### Orientation

By default, the progress is assumed to be horizontal. To change the orientation to vertical, set the orientation
property in the machine's context to vertical.

> Don't forget to change the styles of the vertical progress by specifying its height

<Example id="vertical" />

### Root Provider

An alternative way to control the progress is to use the `RootProvider` component and the `useProgress` hook. This way
you can access the state and methods from outside the component.

<Example id="root-provider" />

## API Reference

<ComponentTypes id="progress" />

## Accessibility

Complies with the [the progressbar role requirements.](https://w3c.github.io/aria/#progressbar).
