GitHub
New

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Kobalte
Kobalte

The Progress component is built on top of Kobalte Progress, which provides the accessible progress primitive.

import { createSignal, onCleanup, onMount } from "solid-js";
import { Progress } from "~/components/ui/progress";


export default function ProgressDemo() {
  const [progress, setProgress] = createSignal(13);


  onMount(() => {
    const timer = window.setTimeout(() => setProgress(66), 500);
    onCleanup(() => window.clearTimeout(timer));
  });


  return <Progress value={progress()} class="w-[60%]" />;
}

Installation

Usage

import { Progress } from "~/components/ui/progress";
<Progress value={33} />

Composition

With label and value

Use ProgressLabel and ProgressValue to add a label and value display.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "~/components/ui/progress";


<Progress value={56} class="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>
Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Label

Use ProgressLabel and ProgressValue to add a label and value display.

Upload progress
56%
import { Progress, ProgressLabel, ProgressValue } from "~/components/ui/progress";


export default function ProgressLabelDemo() {
  return (
    <Progress value={56} class="w-full max-w-sm">
      <ProgressLabel>Upload progress</ProgressLabel>
      <ProgressValue />
    </Progress>
  );
}

Controlled

A progress bar that can be controlled by a slider.

import { createSignal } from "solid-js";
import { Progress } from "~/components/ui/progress";
import { Slider } from "~/components/ui/slider";


export default function ProgressControlled() {
  const [value, setValue] = createSignal(50);


  return (
    <div class="flex w-full max-w-sm flex-col gap-4">
      <Progress value={value()} class="w-full" />
      <Slider
        value={[value()]}
        onChange={(values) => setValue(values[0])}
        minValue={0}
        maxValue={100}
        step={1}
        aria-label="Progress value"
      />
    </div>
  );
}

Indeterminate

Use the indeterminate prop to show an indeterminate progress state.

Processing...
import { Progress, ProgressLabel } from "~/components/ui/progress";


export default function ProgressIndeterminate() {
  return (
    <Progress indeterminate class="w-full max-w-sm">
      <ProgressLabel>Processing...</ProgressLabel>
    </Progress>
  );
}

Custom Value Range

Use minValue and maxValue to set custom value ranges.

5 of 10 tasks completed
50%
import { Progress, ProgressLabel, ProgressValue } from "~/components/ui/progress";


export default function ProgressRange() {
  return (
    <Progress value={5} minValue={0} maxValue={10} class="w-full max-w-sm">
      <div class="flex w-full justify-between">
        <ProgressLabel>5 of 10 tasks completed</ProgressLabel>
        <ProgressValue />
      </div>
    </Progress>
  );
}

API Reference

See the Kobalte Progress API reference for primitive props, accessibility, and progress semantics.