This style guide is deprecated. Please see the revised style guide instead.

Progress and loading indicators

Container

Container progress indicators can be either indeterminate or progress-based. Use an indeterminate progress indicators when you can’t determine when the interface will be ready for user input. Use a progress-based indicator when you can determined when an interface will be ready for input, representing the remaining time as a percentage of the region.

Page

Page-level progress indicators are anchored to the page or in some cases sub-pages, such as dialogs. They can be indeterminate or progress based. They appear at or near the top of the page or view, displaying full-width within the view.

Button (link to button)

Button-level progress indicators show user that the system is receiving user input, and appears within a button control, in place of its previous content.

Skeletons

Skeletons are a form of placeholder content which use simple geometric shapes to represent content that has not yet loaded. The skeleton should mimic the layout of the content as closely as possible. You can subtly animate the skeleton to reinforce to the user that the interface is loading. When possible use a skeleton instead of a progress bar or indeterminate loader. Don’t use skeletons hen the fully-loaded content of the page is unknown, or could change greatly from the skeleton.