---
title: Progress
description: Show measurable or indeterminate task progress.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Progress

> Show measurable or indeterminate task progress.

Use Progress for measurable task completion or for work whose end is not yet known. Choose a determinate value only when it represents real progress.

## Basic usage

```tsx
import { Progress } from 'moraine'

export function Example() {
  return <Progress value={40} max={100} aria-label="Upload progress" />
}
```

## Anatomy

```text
Progress [component; slot=root]
├── status [slot]
├── track [slot]
│   └── indicator [slot]
└── steps [slot]
    └── step [slot]
```

## Usage

### Progress models

Provide a value for determinate progress and omit it for indeterminate progress. Step mode represents a discrete sequence rather than continuous completion; choose the model that matches the work being described.

```tsx
import { Progress } from 'moraine'
import { createSignal } from 'solid-js'

export function Models() {
  const [value] = createSignal(65)

  return (
    <div class="max-w-md w-full space-y-4">
      <div class="space-y-1.5">
        <span class="text-xs text-muted-foreground">Determinate progress ({value()}%)</span>
        <Progress value={value()} />
      </div>
      <div class="space-y-1.5">
        <span class="text-xs text-muted-foreground">Indeterminate progress</span>
        <Progress />
      </div>
    </div>
  )
}
```

### Semantics and animation

The component exposes progressbar metadata. Supply a meaningful label or relationship when visual context alone does not identify the operation. Animation settings affect presentation, not progress ownership.

```tsx
import { Progress } from 'moraine'

export function Semantics() {
  return (
    <div class="max-w-md w-full space-y-2">
      <div class="text-xs text-muted-foreground flex justify-between">
        <span>Downloading installation bundle</span>
        <span>82%</span>
      </div>
      <Progress value={82} status aria-label="Downloading installation bundle" />
    </div>
  )
}
```

## Attributes

| Attributes | Slot | Description |
| --- | --- | --- |
| `data-indeterminate` | `progress`, `progress-indicator` | Present when the checkbox or progress state is indeterminate. |
| `data-progress` | `progress`, `progress-indicator` | Stores whether determinate progress is loading or complete. |
| `data-state` | `progress-step` | Stores the component state used by styling hooks (e.g. open, closed, active). |

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| animation | 'carousel' \| 'reverse' \| 'swing' \| 'elastic' \| undefined | 'carousel' | Visual animation of the component. |
| getValueLabel | ((params: { value: number; min: number; max: number }) => string) \| undefined | — | Callback to get a localized label for the current value. |
| max | number \| string[] \| undefined | 100 | The maximum value of the progress bar, or an array of step labels. |
| orientation | 'horizontal' \| 'vertical' \| undefined | 'horizontal' | Visual layout direction. |
| size | 'sm' \| 'md' \| 'lg' \| undefined | 'md' | Visual size of the component. |
| status | boolean \| undefined | false | Whether to show the status label. |
| statusRender | JSX.Element \| ((props: StatusRenderProps) => JSX.Element) \| undefined | — | Content or render function for the status label. |
| stepRender | ((props: StepRenderProps) => JSX.Element) \| undefined | — | Renderer for each step when `max` is an array. |
| value | number \| null \| undefined | null | The current value of the progress bar. If null/undefined, it is indeterminate. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |