Skip to main content

Progress

Show measurable or indeterminate task progress.

View as MarkdownSource Code

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#

import { Progress } from 'moraine'

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

Playground#

65%
Props
Slots

Anatomy#

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.

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.

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
data-indeterminateSlot: progress, progress-indicatorDescription: Present when the checkbox or progress state is indeterminate.
data-progressSlot: progress, progress-indicatorDescription: Stores whether determinate progress is loading or complete.
data-stateSlot: progress-stepDescription: Stores the component state used by styling hooks (e.g. open, closed, active).

Props#

Renders a <div> element by default.

Prop