Components
Progress Bar
A progress bar component is a visual UI element that represents the completion status of a task or process by filling a horizontal bar from left to right.
Anatomy
Progress Bar component is a visual indicator that displays the progression of a task or process. It provides users with a clear visual representation of the completion status, making it easier to track and understand ongoing activities.
Progress Bar Track: The background element that represents the entire process.
Progress Bar Fill: The filled portion of the progress bar that grows as the task progresses.
Percentage Indicator (Optional): A numerical representation of the completion percentage displayed within or near the progress bar.
Usage
The Progress Bar component is used to visually communicate the progress of a task or process to users. Common use cases include:
File Uploads: Display the progress of file uploads to indicate how much of the file has been transmitted.
Form Submissions: Show the progress of a form submission to inform users that their request is being processed.
Loading Indicators: Indicate the loading progress of a web page or application feature.
Survey Progress: Display the completion status of surveys, questionnaires, or multi-step processes.
Common places buttons appear: Mobile app homepage , website homepage and other pages when needed etc.
When to use
- Real-time Feedback is Essential: You need to provide users with immediate feedback on the progress of a task or process.
- Complex Tasks: Tasks that may take some time to complete or involve multiple steps can benefit from a progress bar.
- Transparency is Required: Users need to understand the status of a process, such as file uploads, downloads, or data processing.
- Enhanced User Experience: A progress bar can improve user satisfaction by reducing uncertainty and frustration.
When not to use
- Tasks are Instantaneous: For tasks that complete almost instantly, such as clicking a button with no noticeable delay, a progress bar is unnecessary.
- Irrelevant to User Experience: Displaying progress may not add value if it doesn't significantly impact the user's interaction or understanding.
- Space Constraints: In situations where screen space is limited, consider using a smaller or more discreet loading indicator.
Accessibility
Ensure that the Progress Bar component is accessible to all users by following these guidelines:
- Provide alternative text for screen readers to describe the progress.
- Ensure keyboard navigation is supported, allowing users to interact with the progress bar using keyboard controls.
- Maintain adequate color contrast between the progress bar fill and background for users with visual impairments.
- Test with screen readers and assistive technologies to verify accessibility.
Do
Use clear and descriptive labels if including a label or percentage indicator.
Don't
Didn’t provide an indicator progress for the progress bar
Content
When creating Progress Bar :
- Label: If a label is included, make it concise and informative.
- Percentage Indicator: If displaying a percentage, use clear formatting and ensure it updates in real-time.
- Alternative Text: For accessibility, provide alternative text that conveys the progress’s status.
- Color Coding: If using color to distinguish between completed and remaining progress, choose accessible colors.
Do
Use color to distinguish between completed and remaining progress, choose colors that are meaningful and intuitive.
Don't
Didn’t use the correct color to distinguish between completed and remaining progress, choose colors that are meaningful and intuitive.