# Linear Progress

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

## Installation

```tsx
import { LinearProgress } from "@makeplane/propel/components/linear-progress";
```
## Usage

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

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

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

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

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

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `showValue` | `boolean` | — | Show the trailing percentage label. Defaults to `true` when determinate, `false` when `indeterminate` (the `%` would be empty otherwise). |
| `indeterminate` | `boolean` | `false` | Animated fill; `value` is ignored and `aria-valuenow` unset. |
| `label` | `string` | — | Visible text label before the track — Base UI's `Progress.Label` (also names the bar). |
| `aria-label` | `string` | — | Accessible name. Optional when `label` is set — the visible label already names the bar. Accessible name (required when there is no visible `label`). |