Propel

Linear Progress

A horizontal progress bar driven by a value, with an optional trailing percentage and an indeterminate state.

Basic

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

export default function BasicDemo() {
  return <LinearProgress value={60} magnitude="md" tone="brand" aria-label="Upload progress" />;
}

Tones

tone encodes signal: brand for accent, success/warning/danger for outcome.

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

export default function TonesDemo() {
  return (
    <div className="flex flex-col gap-3">
      <LinearProgress value={60} magnitude="md" tone="brand" aria-label="Sync progress" />
      <LinearProgress value={60} magnitude="md" tone="success" aria-label="Import progress" />
      <LinearProgress value={60} magnitude="md" tone="warning" aria-label="Storage usage" />
      <LinearProgress value={60} magnitude="md" tone="danger" aria-label="Quota usage" />
    </div>
  );
}

Magnitudes

Track thickness: sm is 5px, md is 8px.

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col gap-3">
      <LinearProgress value={60} magnitude="sm" tone="brand" aria-label="Small bar" />
      <LinearProgress value={60} magnitude="md" tone="brand" aria-label="Medium bar" />
    </div>
  );
}

Indeterminate

value={null} renders an animated fill with no aria-valuenow, for operations of unknown duration.

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

export default function IndeterminateDemo() {
  return (
    <LinearProgress
      value={null}
      magnitude="md"
      tone="brand"
      showValue={false}
      aria-label="Loading workspace"
    />
  );
}

With label

A visible label sits before the track and also names the bar for assistive tech.

Uploading attachments
x
Show code
import { LinearProgress } from "@makeplane/propel/components/linear-progress";

export default function WithLabelDemo() {
  return (
    <LinearProgress
      value={60}
      magnitude="md"
      tone="brand"
      label="Uploading attachments"
      aria-label="Uploading attachments"
    />
  );
}

Installation

import { LinearProgress } from "@makeplane/propel/components/linear-progress";

Props

LinearProgress

PropTypeRequiredDescription
valuenumber | nullYesCompletion from 0 to `max` (default 100). `null` = indeterminate (animated fill, `aria-valuenow` unset).
magnitude"sm" | "md"YesTrack thickness: `sm` 5px / `md` 8px.
tone"brand" | "success" | "warning" | "danger"YesFill color: `brand` accent, `success`/`warning`/`danger` outcome.
showValuebooleanNoShow the trailing percentage label.
labelstringNoVisible text label before the track — Base UI's `Progress.Label` (also names the bar).
aria-labelstringNoAccessible name. Optional when `label` is set — the visible label already names the bar. Accessible name (required when there is no visible `label`).