Feedback
Progress Bar
React progress bar for uploads and background tasks, with measured value/max progress, an indeterminate mode, a visible label, and optional percentage text.
Style (Default/Success/Warning/Danger) — 4 variants
stableReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-11
- Documentation last updated
- 2026-10-06
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 1.0.0
Known open questions
- Figma has no numeric value property — React exposes value/max for determinate usage.
Purpose
A progress bar shows how far an operation has advanced toward completion. Skrewww's React ProgressBar uses a native progress element for measured work and an indeterminate track when the total is unknown. The application supplies progress; the component does not start or time the operation.
Anatomy
Progress Bar = label + native progress or indeterminate track + optional value text.
Variants and states
default · success · warning · danger
When to use
File transfers, record imports, or background processing where a visible label helps people understand what is running. Pass completed work as value and the total as max; these can be bytes or item counts, not just percentages. Use indeterminate while a reliable total is unavailable.
When not to use
A compact loading indicator with no need for a persistent track — use Spinner. Named workflow stages — use Stepper. A value the user can adjust — use Slider; Progress Bar is read-only.
Accessibility
The required label is visible and also supplies the accessible name. Determinate mode uses native <progress> value/max semantics; indeterminate mode uses role="progressbar" and aria-busy="true" without a numeric value. There is no live region: announce meaningful completion or failure separately rather than every percentage change. Reduced-motion preferences disable the indeterminate animation.
Keyboard behavior
Read-only and not focusable. Put pause or cancel actions in separate controls owned by the application.
Common mistakes
Advancing value on a timer rather than using measured work, leaving indeterminate enabled after the total becomes known, or relying on success/warning/danger color alone to explain an outcome. Keep the label meaningful; the visual variant does not change the numeric progress or announce a result.
Properties
React accepts value, max, label, showValue, indeterminate, variant, and className. The existing Figma documentation describes Style variants with a fixed demo fill; runtime values belong to the React API.
Determinate vs indeterminate progress
Use value and max when completed work and its total are known. For 30 of 80 records, showValue displays 38%: the rounded value/max ratio. Values are clamped between zero and max; a non-positive max falls back to 100. Set indeterminate when the total is unknown; numeric progress and percentage text are then omitted. Switch back when the application has a reliable total.
What is the difference between Progress Bar and Spinner?
Progress Bar keeps a visible task label and track, with a percentage when progress is measurable. Its indeterminate mode can keep that same layout while waiting for a total. Spinner is a compact indicator for waiting without a percentage. Neither component performs the work or estimates time remaining.
Using Progress Bar with File Upload
File Upload selects files; it does not transfer them. Your upload code must supply real completed and total values to Progress Bar. If the transport cannot report a total, use indeterminate rather than an invented percentage. In the example, completed and total come from the application; leaving total undefined selects indeterminate mode.
Tokens used
semantic/border/defaultsemantic/action/primarysemantic/feedback/success
Known limitation
The fixed fill and missing numeric value property described for Figma do not limit React: value/max control determinate progress, and indeterminate represents an unknown total.
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Completed work, clamped between zero and max. |
| max | number | 100 | Total work; non-positive values fall back to 100. |
| label | string | — | Required visible task label and accessible name. |
| showValue | boolean | false | Shows the rounded percentage in determinate mode only. |
| indeterminate | boolean | false | Unknown total; omits numeric progress and percentage text. |
| variant | "default" | "success" | "warning" | "danger" | "default" | Semantic style. |
| className | string | — | Additional class on the outer wrapper. |
React example
Copy React example
import { ProgressBar } from "@/components/ui/ProgressBar";
export function UploadProgress({ completed, total }: { completed: number; total?: number }) {
return (
<ProgressBar
label="Uploading files"
value={completed}
max={total}
indeterminate={total === undefined}
showValue
/>
);
}