Progress

Progress

The Progress component displays the completion state of a task or operation.

import Progress from "rocksolidjs/Progress";

export default function Example() {
  return (
    <div class="w-full max-w-md">
      <Progress value={40} />
    </div>
  );
}

Examples

Colors

Use the color prop to communicate the semantic state or meaning of the progress.

import Progress from "rocksolidjs/Progress";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="flex w-full max-w-md flex-col gap-4">
      <div class="flex flex-col gap-2">
        <Typography>Default</Typography>
        <Progress color="default" value={45} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Success</Typography>
        <Progress color="success" value={100} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Warning</Typography>
        <Progress color="warning" value={65} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Info</Typography>
        <Progress color="info" value={35} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Error</Typography>
        <Progress color="error" value={20} />
      </div>
    </div>
  );
}

Sizes

Use the size prop to control the visual thickness of the progress indicator.

import Progress from "rocksolidjs/Progress";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="flex w-full max-w-md flex-col gap-4">
      <div class="flex flex-col gap-2">
        <Typography>Small</Typography>
        <Progress size="small" value={60} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Medium</Typography>
        <Progress size="medium" value={60} />
      </div>
      <div class="flex flex-col gap-2">
        <Typography>Large</Typography>
        <Progress size="large" value={60} />
      </div>
    </div>
  );
}

Value

Use the value prop to indicate the current progress.

import { createSignal, onCleanup } from "solid-js";
import Progress from "rocksolidjs/Progress";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  const [value, setValue] = createSignal(0);

  const interval = setInterval(() => {
    setValue((current) => {
      if (current >= 100) {
        clearInterval(interval);
        return 100;
      }
      return current + 1;
    });
  }, 1000);

  onCleanup(() => clearInterval(interval));

  return (
    <div class="flex w-full max-w-md flex-col gap-2">
      <div class="flex items-center justify-between">
        <Typography>Uploading...</Typography>
        <Typography>{value()}%</Typography>
      </div>
      <Progress value={value()} />
    </div>
  );
}

By default, value is 0, min is 0, and max is 100.

The progress percentage is calculated based on the current value and the configured range.

For example, a value of 25 with a minimum of 0 and maximum of 50 represents 50% progress.

Custom Range

Use the min and max props when the progress value uses a range other than 0 to 100.

import Progress from "rocksolidjs/Progress";
import Typography from "rocksolidjs/Typography";

export default function Example() {
  return (
    <div class="flex w-full max-w-md flex-col gap-2">
      <div class="flex justify-between text-sm">
        <Typography as="span">Step 7 of 10</Typography>
        <Typography as="span">70%</Typography>
      </div>
      <Progress
        min={0}
        max={10}
        value={7}
        color="info"
      />
    </div>
  );
}

For example, a progress indicator with a range from 0 to 10 can use value={7}, min={0}, and max={10} to represent 70% progress.

Accessibility

  • Use Progress to communicate the completion state of an operation.
  • Ensure the current progress value provides meaningful information to users.
  • Do not rely on color alone to communicate progress or status.
  • Use min, max, and value consistently to represent the intended range.
  • For operations where the progress value changes dynamically, ensure updates are exposed appropriately to assistive technologies.
  • Use additional text when the exact progress value is important to understanding the status of an operation.

API

Progress

The Progress component supports semantic colors, multiple sizes, custom value ranges, inline styling, and track-level customization.

Prop Type Required Default Description
class string No — Additional CSS classes applied to the progress component.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color and styling of the progress indicator.
max number No 100 Defines the maximum value of the progress range.
min number No 0 Defines the minimum value of the progress range.
value number No 0 Defines the current progress value.
size "small" | "medium" | "large" No "medium" Controls the visual size of the progress indicator.
slotProps { fill?: object } No — Provides props for customizing the Progress slots.
  • fill — Props for the fill slot.
  • Spinner — Use Spinner when an operation is in progress but its completion percentage is unknown.