Progress Bar

For downloading actions, it’s usually possible to provide an estimated time remaining. For example, if the file size is known, a value or percent completion can be shown based on how much of the file is downloaded.

For uploading actions, real-time progress may or may not be available depending on what information is provided to the system regarding the file. Use the file name and extension as the label when uploading files or images (review related information on file input).

You can embed progress bars within tables when showing a high-level view of updates or installation. While the header serves as a group label for the progress bars within the column, the value is always required for each determinate progress bar.

Use an indeterminate progress bar when you are unable to quantify progress. If the wait time can be shown but the system needs time to calculate a value, you can use an indeterminate progress bar as a feedback method to indicate that the requested operation will begin soon. Once progress can be determined, the progress bar should switch to the determinate kind. In this case, the label and any helper text should remain with size, text placement, and spacing preserved.

Use concise labels to describe the operation when possible. For determinate progress bars, a value is required.

When grouping progress bars, the recommended space between each bar should be a multiple of 4 pixels, horizontally and vertically (read more about the baseline grid on the grid foundations page). Specified margins for each progress bar size are shown below. All units of measurement are in pixels.

Animation in the progress bar depends on whether the progress is determinate or not. A determinate progress bar shows an animation that fills the track as it progresses from 0% toward 100%. An indeterminate progress bar shows a fixed bar that repeatedly moves across the track.

Ensure each progress bar meets the appropriate level of contrast
Both the label and animation must meet a contrast ratio of 3:1 or greater with the page background. Consider increasing available contrast when possible.
WCAG 2.1: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast (w3.org)

Use the top placement when stacking progress bars in an on-page experience
Including a label gives all users the clearest indication of what’s happening. As users typically read from top to bottom and left to right, placing the label on top means that the text explanation is the first thing they see.

If the same system function occurs on a different page or screen in an application or set of pages, it should be identified with the same language
This reduces the cognitive load for people with cognitive difficulties.
WCAG 2.1: 3.2.4 Consistent Identification (w3.org)

Use a clear and concise label
The progress bar’s label should be short, meaningful, and accurate to the pending action. Avoid using jargon. Technical language should be similarly avoided unless it’s absolutely critical to the understanding of the intended audience.
Do: Downloading
Don’t: Downloading file

When uploading, use the file name and extension as the label
Showing the file name and extension helps users confirm they are uploading their intended file. For longer file names that may impinge on the space for value, truncate the text in the middle so that the extension is still visible.
Do: Progress bar guidelines.pdf
Don’t: Uploading file