Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Progress

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

Styling solution Source file Download runnable sandbox

import { createSignal, onSettled } from "solid-js";
import { Progress } from "@radix-solid/primitives";
import styles from "./styles.module.css";
const ProgressDemo = () => {
  const [progress, setProgress] = createSignal(13);
  onSettled(() => {
    const timer = setTimeout(() => setProgress(66), 500);
    return () => clearTimeout(timer);
  });
  return <Progress.Root class={styles.Root} value={progress()}>
			<Progress.Indicator class={styles.Indicator} style={{
      "transform": `translateX(-${100 - progress()}%)`
    }} />
		</Progress.Root>;
};
export default ProgressDemo;

Features

Provides context for assistive technology to read the progress of a task.

Anatomy

Import all parts and piece them together.

import { Progress } from "@radix-solid/primitives";
export default () => <Progress.Root>
		<Progress.Indicator />
	</Progress.Root>;

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value`	`number \| null`	—
`max`	`number`	—
`getValueLabel`	`function`	—

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	The current value
`[data-max]`	The max value