Status & loading

Progress Bar / Indicator

Q: How do people describe a Progress Bar / Indicator in plain words?

the bar that fills up as a file uploads that percent line showing how far along I am the loading bar under the header while a job runs

Q: How do I implement a Progress Bar / Indicator?

Add an upload progress bar bound to real percent complete: use role="progressbar" with aria-valuenow/min/max, animate width smoothly, and show the percent label for tasks longer than a couple of seconds.

A determinate (or sometimes indeterminate) bar showing how far a task has gone.

Also known as progress bar · percent complete · loading bar

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Progress Bar / Indicator".

Add an upload progress bar bound to real percent complete: use role="progressbar" with aria-valuenow/min/max, animate width smoothly, and show the percent label for tasks longer than a couple of seconds.

Anatomy:
- track: Full width background rail.
- fill: Width maps to 0–100% (or indeterminate animation).
- label: Optional percent or step text for long tasks.

Preferred API / pattern: `shadcn Progress`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Fake progress that freezes at 99%
○Avoid: Missing accessible values on a custom bar
○Avoid: Using a progress bar for an unknown short wait

In plain wordsHow people search for it

“the bar that fills up as a file uploads”“that percent line showing how far along I am”“the loading bar under the header while a job runs”

AnatomyOpen for part names

track: Full width background rail.
fill: Width maps to 0–100% (or indeterminate animation).
label: Optional percent or step text for long tasks.

How to write itOpen for stack patterns

Web (HTML/CSS)<progress> / role="progressbar"

React + Tailwind + shadcn/uishadcn Progress

SwiftUIProgressView(value:total:)

Ant Design<Progress percent />

Notes

Prefer determinate progress when you have real percent (uploads, multi-step jobs). Indeterminate bars are just fancy spinners—use sparingly. Don't lie with fake progress that jumps to 99% and stalls; users notice.

Common mistakesHumans and models trip here

Fake progress that freezes at 99%: map to real bytes or switch to indeterminate.
Missing accessible values on a custom bar: expose aria-valuenow.
Using a progress bar for an unknown short wait: a spinner is clearer.

More failure symptoms on AI broke it.

Related patterns

Spinner / Activity IndicatorA compact motion indicator that something is busy—usually circular or system-native.Skeleton ScreenPlaceholder shapes that mirror upcoming content so loading feels structured, not empty.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.

Spotted a wrong name or missing pattern?

Message on X