Propel

Linear Progress

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

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

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

Installation

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

Usage

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

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

Examples

Variants

variant 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 VariantsDemo() {
  return (
    <div className="flex w-full flex-col gap-3">
      <LinearProgress value={60} size="md" variant="brand" aria-label="Sync progress" />
      <LinearProgress value={60} size="md" variant="success" aria-label="Import progress" />
      <LinearProgress value={60} size="md" variant="warning" aria-label="Storage usage" />
      <LinearProgress value={60} size="md" variant="danger" aria-label="Quota usage" />
    </div>
  );
}

Sizes

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

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

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

Indeterminate

indeterminate ignores value and shows an animated fill with no aria-valuenow, for operations of unknown duration. The trailing % is hidden unless you pass showValue.

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

export default function IndeterminateDemo() {
  return (
    <LinearProgress
      value={0}
      indeterminate
      size="md"
      variant="brand"
      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}
      size="md"
      variant="brand"
      label="Uploading attachments"
      aria-label="Uploading attachments"
    />
  );
}

API Reference

LinearProgress

A horizontal progress bar with an optional trailing % label. Drive it with value (0–max); the fill and aria-valuenow follow. Pass indeterminate to ignore value and show an animated fill instead (the trailing % hides by default in that mode). For a ring, use CircularProgress. Grafts Base UI Progress (which owns progressbar) onto the elements/linear-progress styled parts.

PropTypeDefaultDescription
value(required)number—Completion from 0 to max (default 100). Ignored while indeterminate.
size(required)"sm" | "md"—Track thickness: sm 5px / md 8px.
variant(required)"brand" | "success" | "warning" | "danger"—Fill color: brand accent, success/warning/danger outcome.
showValueboolean—Show the trailing percentage label. Defaults to true when determinate, false when indeterminate (the % would be empty otherwise).
indeterminatebooleanfalseAnimated fill; value is ignored and aria-valuenow unset.
labelstring—Visible text label before the track — Base UI's Progress.Label (also names the bar).
aria-labelstring—Accessible name. Optional when label is set — the visible label already names the bar. Accessible name (required when there is no visible label).