Propel

Circular Progress

A small progress ring driven by a value, with an indeterminate spinning state.

x
Show code
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function BasicDemo() {
  return <CircularProgress value={60} size="md" variant="brand" aria-label="Sync progress" />;
}

Installation

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

Usage

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function BasicDemo() {
  return <CircularProgress value={60} size="md" variant="brand" aria-label="Sync progress" />;
}

Examples

Variants

Arc color by signal: brand accent, success/warning/danger outcome.

x
x
x
x
Show code
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} size="md" variant="brand" aria-label="Sync progress" />
      <CircularProgress value={60} size="md" variant="success" aria-label="Backup progress" />
      <CircularProgress value={60} size="md" variant="warning" aria-label="Storage used" />
      <CircularProgress value={60} size="md" variant="danger" aria-label="Quota used" />
    </div>
  );
}

Sizes

Diameter: sm 16px / md 20px.

x
x
Show code
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} size="sm" variant="brand" aria-label="Small ring" />
      <CircularProgress value={60} size="md" variant="brand" aria-label="Medium ring" />
    </div>
  );
}

Indeterminate

indeterminate ignores value and shows a fixed quarter arc that spins, with no aria-valuenow.

x
Show code
import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function IndeterminateDemo() {
  return (
    <CircularProgress value={0} indeterminate size="md" variant="brand" aria-label="Syncing" />
  );
}

API Reference

CircularProgress

A small progress ring (no label — too small). Drive it with value (0–max); the arc and aria-valuenow follow. Pass indeterminate to ignore value and spin a fixed quarter arc instead. For a bar with an optional label, use LinearProgress. Composes the elements/circular-progress primitives on Base UI Progress.

PropTypeDefaultDescription
value(required)number—Completion from 0 to max (default 100). Ignored while indeterminate.
size(required)"sm" | "md"—Diameter: sm 16px / md 20px.
variant(required)"brand" | "success" | "warning" | "danger"—Arc color: brand accent, success/warning/danger outcome.
aria-labelstring—Defines a string value that labels the current element. Accessible name (required). @see aria-labelledby.
indeterminatebooleanfalseSpin a fixed quarter arc; value is ignored and aria-valuenow unset.