elementsprogress

Progress

Determinate or indeterminate progress indicator with optional step labels.

Import#

import { Progress } from 'moraine'

Slot Structure#

Track with a fill indicator, optional status text, and step labels.

root
├── status (optional, determinate only)
├── track
│   └── indicator
└── steps (optional, step mode)
    └── step (×n)

Examples#

Sizes#

Size scale from xs to xl.

1
function Sizes() {
2
  const SIZES: ProgressSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  return (
5
    <div class="w-xl space-y-3">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <div class="flex gap-3 items-center">
9
            <span class="text-xs text-muted-foreground font-mono w-8">{size}</span>
10
            <div class="flex-1">
11
              <Progress value={56} size={size} />
12
            </div>
13
          </div>
14
        )}
15
      </For>
16
    </div>
17
  )
18
}

Orientations#

Horizontal and vertical layouts with consistent value rendering.

1
function Orientations() {
2
  return (
3
    <div class="flex gap-6 w-xl items-end">
4
      <div class="flex-1 space-y-2">
5
        <p class="text-xs text-muted-foreground font-mono">horizontal</p>
6
        <Progress value={32} status />
7
      </div>
8

9
      <div class="space-y-2">
10
        <p class="text-xs text-muted-foreground font-mono">vertical</p>
11
        <div class="h-44">
12
          <Progress value={32} status orientation="vertical" />
13
        </div>
14
      </div>
15
    </div>
16
  )
17
}

Determinate#

Standard progress bar with status text and custom status renderer.

1
function Determinate() {
2
  const [value, setValue] = createSignal(35)
3

4
  const increment = () => {
5
    setValue((current) => Math.min(current + 10, 100))
6
  }
7

8
  const reset = () => {
9
    setValue(0)
10
  }
11

12
  return (
13
    <div class="w-xl space-y-3">
14
      <Progress value={value()} status statusRender={(props) => <>Completed {props.percent}%</>} />
15
      <div class="flex gap-2">
16
        <Button size="sm" variant="outline" onClick={increment}>
17
          +10%
18
        </Button>
19
        <Button size="sm" variant="ghost" onClick={reset}>
20
          Reset
21
        </Button>
22
      </div>
23
    </div>
24
  )
25
}

Animations#

Indeterminate animation variants: carousel, reverse, swing, and elastic.

1
function Animations() {
2
  const ANIMATIONS: ProgressAnimation[] = ['carousel', 'reverse', 'swing', 'elastic']
3

4
  return (
5
    <div class="w-xl space-y-3">
6
      <For each={ANIMATIONS}>
7
        {(animation) => (
8
          <div class="flex gap-3 items-center">
9
            <span class="text-xs text-muted-foreground font-mono w-16">{animation}</span>
10
            <div class="flex-1">
11
              <Progress value={null} animation={animation} />
12
            </div>
13
          </div>
14
        )}
15
      </For>
16
    </div>
17
  )
18
}

Step Mode#

String-array max renders named steps.

1
function StepMode() {
2
  const STEPS = ['Queued', 'Building', 'Deploying', 'Done']
3
  const [value, setValue] = createSignal(0)
4

5
  const next = () => {
6
    setValue((current) => Math.min(current + 1, STEPS.length - 1))
7
  }
8

9
  const previous = () => {
10
    setValue((current) => Math.max(current - 1, 0))
11
  }
12

13
  const reset = () => {
14
    setValue(0)
15
  }
16

17
  return (
18
    <div class="w-xl space-y-3">
19
      <Progress value={value()} max={STEPS} status />
20
      <div class="text-xs text-muted-foreground">
21
        Current: {STEPS[value()]} ({value() + 1}/{STEPS.length})
22
      </div>
23
      <div class="flex gap-2">
24
        <Button size="sm" variant="outline" onClick={previous}>
25
          Back
26
        </Button>
27
        <Button size="sm" variant="outline" onClick={next}>
28
          Next
29
        </Button>
30
        <Button size="sm" variant="ghost" onClick={reset}>
31
          Reset
32
        </Button>
33
      </div>
34
    </div>
35
  )
36
}

API Reference#

Attributes#

Slotroot6 attributes

Progress container that owns track, indicator, labels, and step markers.

Data Attributes

Data Attribute	Description
data-orientation	Stores the rendered orientation.

ARIA Attributes

ARIA Attribute	Description
aria-valuemax	Defines the maximum value for range-like controls.
aria-valuemin	Defines the minimum value for range-like controls.
aria-valuenow	Defines the current numeric value for range-like controls.
aria-valuetext	Provides human-readable text for the current value.
role	Defines the semantic role exposed to assistive technology.

Props#

Prop	Type	Default	Description
animation	`"carousel" \| "reverse" \| "swing" \| "elastic" \| undefined`	—	—
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`ProgressT.Classes \| undefined`	—	—
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`	—	—
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
status	`boolean \| undefined`	`false`	Whether to show the status label.
statusRender	`ComponentOrElement<ProgressT.StatusRenderProps> \| undefined`	—	Custom render function for the status label.
stepRender	`ComponentOrElement<ProgressT.StepRenderProps> \| undefined`	—	Custom render function for each step when `max` is an array.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`ProgressT.Styles \| undefined`	—	—
value	`number \| null \| undefined`	`null`	The current value of the progress bar. If null/undefined, it is indeterminate.