22 CSS Progress Bars

Prefer the native progress element when the bar visualises a value from 0 to max — assistive technology announces the value change automatically, keyboard focus lands correctly, and no ARIA is needed. Use a div with role=progressbar plus aria-valuenow, aria-valuemin, aria-valuemax when you need custom styling that the browser progress bar cannot render (segmented, ring, gauge, buffered range, stacked category). The native element can be styled via ::-webkit-progress-bar and ::-webkit-progress-value on Chromium and Safari, plus ::-moz-progress-bar on Firefox, but multi-layer visuals like the video buffered range are painful with the native element and cleaner with a custom role=progressbar div. For indeterminate state, either drop the value attribute from progress or set aria-busy=true on the container. Real product surfaces: GitHub file uploads use custom bars for the per-file layout with an overall aggregate, Notion database progress uses native progress inside table cells, Linear roadmap milestones use custom conic rings, Vercel deploys use a top-of-viewport thin line similar to NProgress driven by view transitions on route change.

The native fetch API has no upload-progress event yet, so upload progress bars still use XMLHttpRequest in production. The pattern: create an XHR, attach an xhr.upload.onprogress handler that reads event.loaded / event.total, and paint the ratio to --value on your bar container. Update aria-valuenow and aria-valuetext (aria-valuetext="1.2 megabytes of 2.4 megabytes uploaded") so screen readers announce human-friendly progress instead of raw percentages. For download progress from fetch, use response.body.getReader() and read chunks with Content-Length from response headers as the denominator. Cloudinary, Uploadthing, S3 presigned uploads, and Supabase storage all expose progress callbacks that resolve to the same numbers — plug them into the same CSS custom property. AbortController lets users cancel: xhr.abort() or controller.abort() respectively, then reset the bar and flip aria-busy off. For chunked uploads (files >100 MB), track per-chunk completion and aggregate — the download-queue pattern in demo 07 shows the layout.

Server-Sent Events and streaming completions from OpenAI / Anthropic / Vercel AI SDK / LangChain arrive as chunks with no upfront total, so the progress bar becomes indeterminate — an animated stripe or sliding fill with aria-busy=true and no aria-valuenow. When the stream ends, flip aria-busy=false and snap the bar to full. If your backend sends a Content-Length header on the streaming response you can compute a determinate value from bytesReceived / total, but most LLM streams omit it because the total isn't known until the last token. A common alternative is a token counter — read event.data for each SSE message, parse the token payload, and increment a visible counter next to the bar (Received: 847 tokens). Vercel AI SDK's useChat hook exposes isLoading and data that map cleanly to aria-busy and the counter respectively. Include an aria-live=polite region announcing key milestones (Streaming started, Streaming complete) so screen-reader users know when the response is finished.

Five requirements from the AA level: (1) 1.4.3 contrast — the filled portion of the bar needs 3:1 contrast against the unfilled track, and any text label needs 4.5:1 against its background. (2) 1.4.1 use of color — never rely on color alone to communicate state; pair red / amber / green password-strength colors with icon plus text label (Strong — 4 of 4 criteria met). (3) 2.4.13 focus appearance — a 2px focus-visible outline with 3:1 contrast against adjacent colors on every interactive control (cancel, pause, play, step-next). (4) 4.1.2 name role value — every custom bar needs role=progressbar (or use native progress), aria-valuenow / aria-valuemin / aria-valuemax for the numeric value, and aria-label or aria-labelledby naming what is being measured (aria-label="File upload progress", not just aria-label="Progress"). (5) 2.3.3 animation from interactions — respect prefers-reduced-motion by disabling continuous animation loops (indeterminate stripe, pulse, sheen) and snapping bars to their end state instantly. Demo 09 is the reference implementation showing all five wired correctly with an inline annotation panel labeling each attribute.

The traditional pattern needs two rule sets — one for the light theme, one for the dark theme — and they drift out of sync. With color-mix(in oklab, currentColor 15%, transparent) for the unfilled track and color-mix(in oklab, var(--accent) 90%, white 10%) for the fill, the bar reads correctly on both grounds without duplicate rules. On a light card currentColor is near-black so a 15% mix creates a soft grey track; on a dark card currentColor is near-white so the same 15% mix lifts a subtle white track from the dark surface. Wrap the token block in @supports (color:color-mix(in oklab, white 10%, transparent)) with fallback sRGB values declared first for engines that don't support the color-mix function. Pair with oklch() accent colors for perceptually uniform saturation across the light / dark theme swap — an accent authored as oklch(76% 0.16 295) stays vivid on both grounds where an sRGB #a78bfa washes out on a light background. Demo 08 is the technique primer showing both surfaces side-by-side with the same rules.

Animate transform: scaleX() from 0 to 1 instead of width from 0% to 100% whenever possible — transform is a compositor-only property that stays on the GPU thread, while width triggers layout on every frame and jerks on mobile Safari with anything else running. Set transform-origin: left center and will-change: transform on the fill layer to give the browser a hint to promote it. Compositor pins also apply to opacity (for fading in the buffered range overlay) and filter (for the sheen shimmer on demo 16). Avoid animating background-position, box-shadow, and border-radius in continuous loops — they force layout or paint on every frame. For the ring / conic patterns (demos 13, 19) animate stroke-dashoffset (compositor-safe on SVG) or wrap the conic angle in @property --value with a syntax descriptor of the number type so it interpolates smoothly instead of jumping. Always pair motion with @media (prefers-reduced-motion: reduce) disabling transitions and snapping bars to end state.

Five loading / progress collections cover different search intent lanes. This collection — css-progress-bars — covers determinate and indeterminate progress UI as a value indicator (upload progress, form completion, password strength, download queue, video buffering, storage / quota meters). The bar communicates a specific value or a specific busy state that will resolve. css-scroll-progress-bar covers scroll-driven reading progress at the top of an article via animation-timeline: scroll() — the value is derived from scroll position, not a task. css-loader-designs covers generic loader shapes (spinners, dots, cubes) — the busy state without a value. css-loading-animations covers narrative branded loaders (chef, delivery truck, coffee brewing) — themed to the product domain. css-spinner-designs covers spinner-only patterns (arc, orbit, gradient conic sweep). css-skeleton-loaders covers content-placeholder skeleton UI showing the shape of upcoming content, not a value or busy state. Each collection ranks for its own set of Google queries.

Every demo is framework-agnostic vanilla CSS scoped under a single unique .pb-NN root so it drops into any framework without leaking. Tailwind v3 and v4 users can either drop the demo CSS into an @layer components block or apply the tokens in their own utility classes — the --value CSS custom property is Tailwind-native (style={{ '--value': 68 }} in React). React / Next.js / Remix consume the bar as JSX with style={{ '--value': progress }} inline styles; the demo's JS (upload progress, streaming, password strength, step tracker) can be lifted into a React hook — useUploadProgress, usePasswordStrength — with useState for the value and useEffect for the XHR / fetch setup. Vue 3 users wrap the demo in a template block with a style binding of the form :style set to an object mapping the --value custom property to the reactive progress ref. Svelte binds --value via style:--value={progress}. Astro islands (client:visible) work with the vanilla JS as-is. SolidJS, Qwik, and Angular signals all map to the same CSS custom property pattern.