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.