FORMA Docs

Progress

Show how much of a known task is complete.

import { Progress } from "@/forma/arc/progress/progress";
Base

In FORMA

  • Liegt in kit/arc/progress und ist über @/forma/arc/progress/progress erreichbar.
  • Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.
  • Das Kit nutzt ihn als Progress aus @/forma/ui/progress — mit shadcns API, damit Module, Blöcke und Apps unverändert bleiben; die Charakter-Achsen der Richtung liegen darüber.

When to use

  • Determinate progress for uploads, imports, or long tasks.
  • Progress with a visible percentage and a check at completion, via showValue.

When not to use

  • Use skeleton while content is loading with no progress to report.
  • Use usage-meter for quota against a limit, and gauge for dashboard metrics.
  • Use stepper to show position in a multi-step flow.

Usage

import { Progress } from "@/forma/arc/progress/progress";

export function UploadProgress({ sent, size }: { sent: number; size: number }) {
  return <Progress label="Uploading report.pdf" value={sent} max={size} showValue />;
}

API reference

Progress

A linear progress bar with an optional label and a counted percentage that matches the fill.

PropTypeDefaultDescription
valuenumber0Current value, clamped between 0 and max.
maxnumber100Value that counts as complete.
labelstring–Visible label and aria-label. Falls back to "Progress" for assistive tech.
showValuebooleanfalseShows the counted percentage and a check at 100%.
...propsOmit<HTMLAttributes<HTMLDivElement>, "children">–Forwarded to the progressbar element, such as className.

Accessibility

  • Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a percentage aria-valuetext.
  • Label changes crossfade; outgoing copies are aria-hidden while they fade.
  • It is not a live region; announce completion separately if it matters.

Motion

  • One smooth spring drives both the fill and the counted number, so they always agree. The fill slides in from the left to keep its rounded end.
  • At 100% the fill turns to the success colour and a check settles in beside the count.
  • Reduced motion jumps the fill and count to the new value.

Responsive behavior

  • The bar fills its container width, so it works in cards, rows, and full-width layouts.

Performance

  • One spring drives both the fill and the counted number; no observers or timers.
  • It is not a live region, so announce completion separately if it matters.

Notes for AI

  • Use for determinate task progress. Use skeleton while content has no progress to report, gauge or activity-rings for dashboard metrics, and usage-meter for quota against a limit.
  • Pass raw value and max; the percentage is computed and clamped for you.

Also in progress

  • Countdown: A launch countdown with rolling digits that morphs into a live state at zero.
  • Onboarding checklist: Guide a new workspace through setup, one step at a time.

Guidance for AI tools

Progress: Show how much of a known task is complete. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückRatingWeiterSkeleton

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.