Progress indicators

Progress indicators are animated helpers that indicate waiting time as content loads.

Guidelines

Progress indicators inform users about the current loading state, giving them insight into the process. Progress indicators may be determinate or indeterminate.

Determinate

Determinate progress indicators indicate how long the process will take. They should be used once there is an estimate of wait time available.

Indeterminate

Indeterminate progress indicators indicate an unknown amount of time the process will take. They should be used when there is not an estimated wait time available.

Variations

Linear

Linear progress indicators are great to focus attention to an area. They are great for places like empty pages, at the bottom of the topbar and in cards and in lists.

🙈Ops! Can't find the image, but you could still try Figma.

Circular

Circular progress indicators are great for places like icons and empty pages. They should be used for short waiting times.

🙈Ops! Can't find the image, but you could still try Figma.

Dots

Dot progress indicators are for use within buttons.

🙈Ops! Can't find the image, but you could still try Figma.

Star

Star progress indicators are to be used on splash screens and empty pages only.

🙈Ops! Can't find the image, but you could still try Figma.

Demo

Circular progress (determinate, indeterminate)

Dot progress

Linear progress (determinate, indeterminate)

Star progress (determinate, indeterminate)