Progress Bar

Progress bars visually show system loading progress, such as uploading a file or loading a page, as well as user progress, like filling out a form.

Demo and Developer GuidelinesFigma Component

Anatomy

Types

Loading

Loading progress bars are used to convey system loading status, such as a file uploading or a page loading. These have an animated “candy stripe” pattern.

Progress

Progress bars without the loading animation are used to track non-system progress, like a user’s completion through a form or page.

Behavior

Responsive Widths

Progress bar is a block element that fills up the width of its container.

Specifications

Styling