Progress Bar Expressive Component

An alternative to the progress spinner, especially for longer anticipated loading times.

The expressive progress bar can replace our traditional spinner to feel faster during periods of longer loading. To portray responsive and quicker loads, the expressive loader's design uses visual momentum to indicate progression across refreshing, page loading and user actions.

This pattern consists of an animated progress bar in various colors and an optional set of messages that are cycled into view. These messages render in an element with role="status" , which announces new content to assistive technology.

The expressive progress bar also renders different experiences depending on the prefers-reduced-motion media query. Toggle your reduced motion settings to view examples with the default behavior and reduced motion behavior.