isIndeterminate

A progress bar can be either determinate or indeterminate. By default, progress bars are determinate. Use a determinate progress bar when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate progress bar when progress is happening but the time or effort to completion can't be determined (e.g., attempting to reconnect to a server).

size

Progress bars come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

width

The width of a progress bar can be customized appropriately for its context. The default width is size-2400 (192 px on desktop and 240 px on mobile).

valueLabel

Progress bars can have a value label that gives detailed information about the progress (e.g. "60%" or "2 of 8"). This value label works alongside the label and should not be displayed if the label itself is not displayed. It should also not be displayed if the progress is indeterminate. Similar to the label, the value label is always placed above the track.

value, min value, max value

The value represents progress within the bar's range, from minimum to maximum. These defaults are 0 and 100 but can be customized. Min and max values don't apply to indeterminate progress bars.

hideLabel

The label of the progress bar can be hidden if the context for the progress bar is sufficient without the title — for example, when the progress bar is shown inside a table row and the item is labeled in another column.

labelPosition

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts. Side labels are most useful when vertical space is limited.

label

Progress bars should have a label that gives context about the operation being performed. Use an ellipsis at the end of the label text to communicate that the process is in progress. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These progress bars should still include an aria-label in HTML (depending on the context, "aria-label" or "aria-labelledby").

staticColor

When a progress bar needs to be placed on top of a colored background, use the over background variant. This progress bar uses a static white color regardless of the color theme. Make sure the background offers enough contrast for the progress bar to be legible.

variant

Use the over background variant when a progress bar needs to be placed on top of a colored background or visual.

Over background progress bars are available in static black or white, meaning they don't change with the theme of the page. Use static black on light color or image backgrounds, and white on dark color or image backgrounds.