Progress Bar HTML

Progress bars: communicating that work is happening

A progress bar turns invisible work — an upload, a video buffer, a multi-step form — into something the user can watch advance. The user research is consistent: people will wait much longer for a task that appears to be progressing than for the same task represented by a spinner. Even a roughly accurate estimate beats no estimate, and a deterministic bar beats an indeterminate one whenever you can compute progress.

HTML has a native primitive: the <progress> element. With a value it is determinate; without one it renders as indeterminate.

<progress value="50" max="100">50%</progress>
<progress>Loading...</progress>

Native is the cheapest path, but styling is painful: each engine ships its own pseudo-elements (::-webkit-progress-bar, ::-webkit-progress-value, ::-moz-progress-bar) and you have to override all of them. For full design control most teams use a custom div with an inner div whose width animates via CSS transition.

Accessibility

A custom bar needs the full ARIA quartet: role="progressbar" plus aria-valuenow, aria-valuemin and aria-valuemax. Update aria-valuenow as progress advances. For indeterminate state, omit aria-valuenow — screen readers will announce "busy" instead of a percentage. Add an aria-label or aria-labelledby so the bar is named ("Upload progress", "Form completion").

Types of progress

• Linear — the default; works for uploads, downloads, video buffers.
• Circular / radial — compact, common for inline avatars or dashboard widgets.
• Stepped — multi-step forms or onboarding wizards; shows the current and total steps.
• Skeleton — placeholder shapes that mimic the final layout; perceived as faster than a progress bar for page loads.
• Indeterminate — striped or shimmering animation when duration is unknown.

Libraries and implementation

Top-of-page slow-page loaders typically use NProgress (the thin coloured bar that YouTube popularised). For richer animations there is ProgressBar.js (SVG, lots of shapes), react-progressbar.js and nprogress-vue. Upload UIs rely on the progress event of XMLHttpRequest or the ReadableStream body of fetch to compute bytes-transferred-over-total. Update the DOM inside requestAnimationFrame and throttle bursts to avoid layout thrash on fast networks.

UX tricks worth knowing

Colour conveys semantics: green for success, blue for neutral activity, yellow for warning, red for error. Pair the bar with an ETA or a step count ("Uploading 3 of 5") — Microsoft's famous "copy file" dialog discovered that bars that occasionally pause and jump make tasks feel faster than perfectly linear ones, because the brain anchors on the jumps. Always keep the bar smooth: a value that decreases unexpectedly looks like a bug.

FAQ

Progress bar or spinner? Bar when you can measure progress; spinner only when duration is truly unknown and short. For anything longer than ~5 seconds, even an indeterminate bar beats a spinner.

Can I style native <progress>? Partially. Cross-browser styling requires several pseudo-elements and the result is still less flexible than a custom div. For brand-heavy UIs, go custom.

Are ARIA attributes really vital? Yes. Without role="progressbar" and aria-valuenow, screen-reader users have no way to know that something is loading or how far it has progressed.

What about skeleton screens? They are not a progress bar but a placeholder UI. Use them for initial page loads (perceived faster); use real bars for measurable operations like uploads.