Only Show a Percentage You Can Defend.

Create a single-file upload progress bar bound to real XHR progress events. The track is h-2 rounded-full bg-zinc-200 with an indigo-600 fill whose width equals Math.min(100, Math.round(loaded / total * 100)) from each progress event — no timer-based increments. Show the percentage right of the bar in tabular-nums text-sm, the filename above it, and at 100% transition the fill to green-500 over 300ms and swap the label to an "Uploaded" check. Set role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext like "64 percent uploaded". Disable the submit button while in flight, and on error freeze the bar at its last value, turn the fill red-500, show the error message, and offer a Retry button that restarts the same upload.

Create a multi-file upload queue where each row shows filename, file size, its own determinate progress bar from that file's XHR events, and a status chip that moves from Uploading to Done or Failed. Upload files with a concurrency of three, so no more than three bars are active at once and the rest read as Queued. Above the list, an aggregate bar sums loaded bytes across all files divided by total bytes of the queue, labeled "3 of 7 files complete". Each bar carries role="progressbar" with live aria-valuenow. A failed file freezes its bar at the last value with a red fill and a Retry control that re-enqueues only that file, while the aggregate bar recalculates its denominator to exclude already-succeeded files.

Create a data import progress view driven by server-reported row counts, not client guesses. The client polls a job status endpoint every 800ms and sets the fill width to processedRows over totalRows, showing "1,240 of 5,000 rows" beside the bar in tabular-nums with thousands separators. Update the aria-valuetext to the same phrase. Add a live log region below showing the last three processed batches with timestamps, an ETA in plain words ("about 2 minutes remaining") computed from the trailing 10-second rate, and stage labels that change from Validating to Importing to Finalizing as the server reports them. If polling fails three times, freeze the bar, show "Connection lost — retrying", and resume from the server value on reconnect without resetting to zero.

Create a setup-completeness bar for an onboarding checklist with six steps: add profile photo, verify email, invite a teammate, connect an integration, create a project, complete billing. The fill equals completed steps divided by six, recomputed from application state whenever any step changes, so it never animates on its own. Each completed step ticks from an empty to a checked circle with a 200ms scale transition, and the bar eases its width over 400ms so multi-step completions feel cumulative. Label the bar "Setup 67% complete" with role="progressbar" and matching aria-valuenow and aria-valuetext. Below the bar, surface the single highest-value incomplete step as a clickable suggestion, reordering by a fixed priority, so the bar reads as guidance rather than surveillance.