Progress Bar
Progress bars visually represent the completion status of a task or process. They provide users with feedback on the progress and can indicate different states, such as normal, warning, or error.
Last updated
Progress bars visually represent the completion status of a task or process. They provide users with feedback on the progress and can indicate different states, such as normal, warning, or error.
Last updated
When users interact with tasks that involve waiting (e.g., file uploads), progress bars offer reassurance and set realistic expectations for completion, preventing frustration during longer waits.
Use progress bars when you need to visually communicate the completion status of a task, especially when the task has a defined start and end point.
For processes like file uploads, downloads, or data transfers that require time, a progress bar keeps users informed without needing manual updates.
Use when there are multiple stages to a task that users need to see, like step-by-step processes or multi-phase forms.
If a task’s duration might vary (e.g., waiting for a server response), a progress bar helps manage expectations, even when the time isn’t precise.
Avoid using a progress bar for actions that complete instantly (e.g., button clicks or small data transfers), as it adds unnecessary complexity.
If a task's completion time is highly unpredictable, a progress bar may mislead users. Consider alternative feedback (e.g., spinner) in such cases.
For small, non-critical updates that users don’t need to track closely (e.g., minor background refreshes), a progress bar may not be necessary.
Using too many progress bars in one interface can overwhelm the user. Ensure that the information is vital before including multiple indicators.
Loading Bar: The primary visual element that fills as the task progresses, representing the percentage of task completion.
Label (Text): The label identifying the task associated with the progress bar.
Base Track: The static background on which the progress bar moves, providing a visual contrast for the progress indicator.
Description: Text or numbers that provide additional context about the progress, such as Completion rate or steps.
Small
12
14
2
4
Medium
14
18
2
8
Large
14
20
2
12
Keyboard Navigation: The progress bar should not interfere with standard keyboard navigation. If there are interactive elements, ensure they can be accessed and controlled via keyboard.
Color Contrast: Ensure the colors used for the progress bar and background have sufficient contrast.
Text Descriptions: Provide textual or percentage-based descriptions for users who rely on screen readers or prefer non-visual feedback. Make the status readable in multiple ways.
Maintain Consistency Across Devices: Progress bars should behave consistently across devices and screen sizes, ensuring that mobile and desktop experiences reflect the same progress state.
File Uploads/Downloads: Indicate the percentage of a file transfer, letting users know how much of the file has been uploaded or downloaded.
Form Submission Progress: For long forms that are divided into steps, a progress bar helps users see how many steps they’ve completed and how many remain.
Installation Process: Used in software installation or system updates to show how much has been completed and how much time is remaining.
Data Processing Tasks: In apps with heavy data processing, progress bars help track how much data has been processed, keeping users informed during large tasks.
Page Load or Content Refresh: A progress bar can be used for tasks like loading web pages or refreshing app content, giving feedback on how much content has been loaded.
