ProgressCircle

Display determinate or indeterminate progress over time.

Documentation: React Aria
Pattern: W3C ARIA
Source: GitHub
Issues: Report
Composes: Field

ProgressCircle example

"use client";
import { useEffect, useState } from "react";
import { ProgressCircle } from "@/shim-ui/progress-circle";

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 <ProgressCircle aria-label="Loading…" size={2} value={value} />;
};

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add progress-circle

Size

Adjust the size prop to change the diameter.

Size example

import { ProgressCircle } from "@/shim-ui/progress-circle";

export default () => (
  <>
    <ProgressCircle aria-label="Loading…" size={1} value={70} />
    <ProgressCircle aria-label="Loading…" size={2} value={70} />
    <ProgressCircle aria-label="Loading…" size={3} value={70} />
  </>
);

Indeterminate

Use the isIndeterminate prop to indicate ongoing progress without a known completion state.

Indeterminate example

import { ProgressCircle } from "@/shim-ui/progress-circle";

export default () => (
  <ProgressCircle aria-label="Loading…" isIndeterminate size={2} />
);