Progress

Progress is a thin and linear visual designed to show processing time for a task or workflow.

Overview

Designed to be used on a top or bottom edge of an area, Progress can be a helpful UX device to show the user something is being processed or loaded.

Progress has a smaller height than Loader and is less obtrusive, which can be handy in tight spaces. Prefer the "determinate" type when processing time can be accurately represented.

Usage

Sample

Best practices

Progress typeUsage
"determinate"Preferred type. Use when processing percentage can be relayed to the user.
"indeterminate"Use when a processing percentage cannot be relayed.
Correct Progress determinate
Do defer to determinate Progress bar whenever possible.
Avoid Progress floating no edge
Avoid floating Progress bars on elements that are lacking a hard edge or border. Defer to Loader for these instances.

API reference

Properties

Styles

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.