Progress

import { Progress } from '@elirobinson/react/components/atoms/Progress';

import { Progress } from '@elirobinson/react/components/atoms/Progress';

export default function Basic() {
  return (
    <div className="demo-col">
      <Progress value={65} label="Import progress" />
    </div>
  );
}

When to use it

Use Progress when you know how far along a task is — an upload, an import, a multi-step count. Use Spinner instead for indeterminate work where you don't know how long it'll take, and Skeleton for a structural loading placeholder before content exists at all.

Values and custom max

value clamps to the 0–max range for you. Use max to represent the real unit instead of normalizing everything to a percentage yourself.

import { Progress } from '@elirobinson/react/components/atoms/Progress';

export default function States() {
  return (
    <div className="demo-col">
      <Progress value={20} label="Warm-up drills" />
      <Progress value={65} label="Skills circuit" />
      <Progress value={100} label="Cooldown" />
      <Progress value={3} max={5} label="Modules complete" />
    </div>
  );
}

Props

Accessibility

• Renders role="progressbar" with aria-valuenow, aria-valuemin={0}, and aria-valuemax kept in sync with value/max.
• label becomes the progress bar's aria-label — it's optional in the type, but it's the only accessible name the control gets. Skip it and screen readers announce an unlabeled progress bar.
• No internal timer or animation — the visual bar only moves when value changes, so the state you show is always the state you pass in.

Related