It’s not always necessary to show progress. Sometimes a task’s progress is obvious enough on its own or the task completes so quickly that showing progress would be distracting. Here are some points to consider when determining whether you should show progress.
- Does the operation take more than two seconds to complete? If so, show progress as soon as the operation starts. If an operation takes more than two seconds to complete most of the time, but sometimes completes in under two seconds, wait 500ms before showing the component to avoid flickering.
- Is the operation waiting for the user to complete a task? If so, don’t use progress. The progress component is for showing computer progress, not user progress.
- Does the user need to know that something is happening? For example, the web app may be progressively loading parts of the site that aren’t immediately visible to the user. If it’s happening in the background and the user didn’t initiate the action, the user doesn’t need to know about it.
- Can you use the content from the operation to visualize progress? If so, don’t show progress. For example, when displaying images loaded from the disk, images appear on the screen one-by-one as they are loaded. Displaying progress would provide no benefit; it would just clutter the UI.
- Use when long-running progress is measurable. Ex. Downloading a large file.
- Use to show the percentage of completion of an operation.
- Can be used locally or regionally on a webpage. Example of local usage: It could be used on each item of a list of apps which are downloading to show progress on each app. Regional example: Excel Online’s status bar shows determinate progress for actions affecting the entire workbook.
- Determinate progress can be used when the user interaction is blocked or unblocked.
Indeterminate Regional Progress
- Use when immeasurable progress is underway pertaining to a group of user interaction or a defined area of the web page. Ex. Across a table of data if it is loading.
- Place indeterminate regional progress at the highest point of the affected region.
- Use to indicate long non-modal processes (greater than 2 seconds).
- Consider the performance implications of the user experience when waiting for longer than 2 seconds.
Indeterminate Local Progress
- Use when the amount of progress is indeterminate, for example, immeasurable loading of content.
- Use to notify the user to wait.
- Use to signal to the user that some amount of user interaction is blocked until the app completes the task, that is, the activity is modal. Ex. If a button initiated an operation, it might change to a disabled state, during which indeterminate local progress would be placed near the disabled button until the operation was complete.
- Use for long, non-quantifiable modal processes. Ex. Splash loading screens.
- Use the large size on large loading screens or when there are only a few elements on the page with a large amount of whitespace. In a sense they are still local to the content focal point.
- Use when it is critical to display progress close to the initiating action.
- Use only when necessary and when there is truly some process represented by the indicator.
- Be mindful of its style and placement in the page according to the guidance above.
- Don't use as a decorative tool to show that something is happening when there are no processes or events happening.
- Rely on progress as the only solution for poor latency problems. Ideally, the expected action would happen naturally without any need for a progress indicator.
Also known as
- Bring focus to the progress element if the user should wait until the progress is complete before interacting with the page.
- Do not bring focus to the progress element if the user can interact with the page while progress is being displayed.
- When the progress element is loading a region of a page, the progress element should get the
aria-describedbyattribute with a value of the
idof the region being loaded. The region getting loaded should have the attribute
aria-busy="true"until progress has completed.
aria-labelto the progress element for additional accessibility context.
determinatewhen progress is measurable.
indeterminate-regionalwhen a process is underway that affects or will affect a particular region of the page.
indeterminate-localto indicate progress close to the object that initiated the action. Set
- Schema definition: The progress schema defines the acceptable configurations, requirements, and options for each component.
Code and preview
<progress class="c-progress" role="progressbar" max="100" value="80" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-label="determinate progress bar"> <!--[if lt IE 9]> <div class="c-progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-label="determinate progress bar"> <span style="width:80%"></span> </div> <![endif]--> </progress>
<div class="c-progress f-indeterminate-regional" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate regional progress bar"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
<div class="c-progress f-indeterminate-local f-progress-small" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local small progress bar"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
<div class="c-progress f-indeterminate-local f-progress-large" role="progressbar" aria-valuetext="Loading..." tabindex="0" aria-label="indeterminate local large progress bar"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>