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`).