Progress bar

Component preview

A visual and semantic indicator that shows a current completion value within a known range.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: completion bar, determinate progress, upload progress

show how much of the upload is done
a bar filling from zero to one hundred
track known progress during import
display sixty percent complete
a measurable installation status
show remaining progress without a spinner

Try it

Wait and track progress

Compare all three behaviors

Shared comparison scenario: A workspace waits for content or an operation to finish and communicates only the progress it can measure honestly.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Progress bar

Progress bar requires a meaningful measurable value; Spinner is for unknown completion, while Skeleton represents the eventual content layout.

Your task

Start the upload, observe a mid-progress value, cancel, restart, and reach the completed state.

Edge case to verify

If the server stops providing reliable values, the UI switches honestly to an indeterminate busy state instead of faking progress.

Mission

Progress bar

Start the upload, observe a mid-progress value, cancel, restart, and reach the completed state.

Primary state: The labeled progress element exposes bytes and percentage while the file transfers.

Video upload0/20 MB, 0%

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Label

The persistent text that names a control or field.

Use it when

Uploading a file with reliable byte progress
Completing a known sequence of processing steps

Avoid it when

The value is guessed or jumps unpredictably
Only the content shape, not completion, matters

Compare similar concepts

Spinner communicates an indeterminate wait; Progress bar shows measurable completion, while Skeleton previews the shape of content still loading.

Spinner

Skeleton previews content shape; Spinner communicates unknown work compactly, while Progress bar reports measurable completion.

Skeleton

Technical details

Behaviors

Update measurable progress
The current value advances within a known minimum and maximum without excessive announcements.
Mark the region busy
The content region exposes its busy state while a separate visual indicator remains redundant.

States

Upload idle
Upload idle
Upload with measured progress
Upload with measured progress
Upload without a reliable estimate
Upload without a reliable estimate
Upload cancelled
Upload cancelled
Upload complete
Upload complete

State transitions

Upload idle → Upload with measured progress
Start upload initializes the measured example at 25 percent of 20 MB.
Upload with measured progress → Upload complete
Complete sets the measured value to 100 percent and announces the finished upload.
Upload with measured progress → Upload without a reliable estimate
Simulate unavailable estimate removes the progress value while keeping the upload active.
Upload without a reliable estimate → Upload with measured progress
Restore estimate returns to the preserved measured value.
Upload with measured progress → Upload cancelled
Cancel stops the measured upload and exposes Restart.
Upload without a reliable estimate → Upload cancelled
Cancel stops the upload even when no reliable estimate is available.
Upload cancelled → Upload with measured progress
Restart begins the measured example again at 25 percent.
Upload without a reliable estimate → Upload complete
Complete finishes the upload and reports 100 percent even after the estimate became unavailable.
Upload complete → Upload idle
Reset restores the replayable upload example to zero.

Test scenarios

Context: A 20 MB video upload reports reliable bytes transferred and supports cancellation.
Mission: Start the upload, observe a mid-progress value, cancel, restart, and reach the completed state.
Primary state: The labeled progress element exposes bytes and percentage while the file transfers.
Edge case: If the server stops providing reliable values, the UI switches honestly to an indeterminate busy state instead of faking progress.

Accessibility

Role: native progress element
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: The progress indicator does not receive focus; focus remains on the operation controls or current task.
Dismissal: It ends only on completion, failure, or explicit cancellation and is replaced by the matching final status.
Scroll: Loading and replacement content reserve enough space to prevent layout jumps and preserve the user's scroll position.
Announcement: The accessible name and current value are exposed; announcements are paced to avoid reading every tiny update.
Keyboard: Tab skips the noninteractive bar
Tab reaches a separate Cancel action when available

Bindings

progress
implementationKind
native
nativeElement
progress
ariaPattern
progressbar
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Use a determinate progress element only when a meaningful current value and maximum are known; otherwise expose an indeterminate busy state.
Verify binding source

Sources

WHATWG HTML: The progress element
WHATWG · standard · 2026-07-16
Claim covered: Progress bar: native progress value, maximum, determinate state, and indeterminate state semantics.
WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Claim covered: Progress bar: WCAG status-message requirements used to qualify non-focus-moving announcements.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.