What is Progress Bar?

Progress Bars show completion percentage for tasks with known duration or steps. Linear bar that fills from 0% to 100%. Answers "how much longer?" which reduces perceived wait time. Essential for file uploads, multi-step forms, onboarding, installations. Use spinner for indeterminate tasks.

When Should You Use This?

Use progress bars for tasks with measurable progress: file uploads, exports, installations, multi-step forms, batch operations. Show percentage or step count (3 of 5). Update frequently (feels responsive). Estimate conservatively (better to finish early than late). For indeterminate tasks, use spinner. For long tasks, add time estimate.

Common Mistakes to Avoid

• •Fake progress—jumping 0→99% instantly then hanging is worse than spinner; show real progress
• •No percentage/steps—"Progress..." is vague; show "Uploading 3 of 10 files" or "45%"
• •Backwards movement—progress should only move forward; if it goes back, users panic
• •Too fast/slow—update every 100-500ms; too fast is jittery, too slow feels frozen
• •No completion state—when done, show success message or automatically proceed

Real-World Examples

• •Dropbox—file upload progress with percentage, file count, transfer speed
• •Linear CSV import—progress bar with "Processing 250 of 1000 rows"
• •Stripe onboarding—multi-step progress bar (3 of 5 steps complete)
• •GitHub Actions—build progress with step-by-step breakdown