ProgressBar

Display determinate or indeterminate progress over time.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field
Loading…0%
ProgressBar example
"use client";
import { useEffect, useState } from "react";
import { ProgressBar } from "@/shim-ui/progress-bar";

export default () => {
  let [value, setValue] = useState(0);

  // Simulate loading
  useEffect(() => {
    if (value >= 100) {
      return;
    }
    let interval = setInterval(
      () => setValue((v) => Math.min(v + Math.random() * 25 + 1, 100)),
      1000
    );
    return () => clearInterval(interval);
  }, [value]);

  return <ProgressBar label="Loading…" value={value} />;
};

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add progress-bar

Indeterminate

Use the isIndeterminate prop to show ongoing progress without a known completion value.

Indeterminate example
import { ProgressBar } from "@/shim-ui/progress-bar";

export default () => <ProgressBar aria-label="Loading…" isIndeterminate />;