Progress Bar
UI ComponentsA horizontal indicator that shows the completion status of a task or process, filling from left to right as progress is made.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Progress Bar coming soon.
How It Works in Apps/Websites
Progress bars visualize how much of a task is complete. They consist of a track (background) and a fill (foreground) that grows proportionally. Determinate progress bars show exact percentage (file upload 75%), while indeterminate ones animate continuously when progress can't be measured. Often include percentage text.
How AI Interprets This Term
When you say 'progress bar', AI expects: horizontal bar, typically 4-8px tall, with rounded ends. Track is light gray, fill is colored (often green or blue) and grows from left. May have percentage text above or to the right. Full width or fixed width depending on context.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a progress bar showing 60% completion
Design a file upload progress bar: 100% width, 8px height, rounded full. Track is gray #e5e5e5, fill is blue #3b82f6. Show percentage text and file name above, uploaded/total bytes below. Smooth fill animation.
Show a determinate progress bar (75% complete) vs indeterminate (animated stripe pattern moving right)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •File uploads/downloads
- •Multi-step processes
- •Data loading with known size
- •Installation/setup wizards
When NOT to Use
- •Unknown duration (use spinner)
- •Very short operations
- •Binary states (use toggle)