Action Indicator

Action indicators let users know when there is a background task underway. Depending on the type of indicator used, it may disappear or its state may change when the task is complete. These indicators assure a user that the system is still working as intended.

Variants

The indicator will time out after three seconds.

Full-page blocking

A full-page blocking indicator is system-triggered and appears on page load. A gray overlay takes over the entire screen and a white container with the loading spinner and "Loading..." copy is centered on the layout. When the background task is complete, the indicator and overlay disappear and are replaced by the page content.

<div class="c-loading__overlay">
<div class="c-loading">
  <div class="c-loading__spinner"></div>
  <div class="c-loading__content">
    Loading...
  </div>
</div>
</div>

Copy

The indicator will time out after three seconds.

Region blocking

A region blocking indicator will appear over a specific content region. The overlay will only cover the area of the layout where the content is expected to appear and the indicator is centered on the overlay. When the background task is complete, the indicator is replaced by the content in that region.

<div
class="c-loading__overlay--contained">
<div class="c-loading">
  <div class="c-loading__spinner"></div>
  <div class="c-loading__content">
    Loading...
  </div>
</div>
</div>

Copy

Saving...

Non-blocking

Use the non-blocking indicator when a user may still interact with the expereince while the background task is taking place. Because they do not interfere with a user's process, non-blocking indicators should use both the in-progress and completed states detailed below to alert the user when the task is complete. When confirming saved changes in response to a form submission, use a success notification.

<div class="c-loading c-loading--non-blocking">
  <div class=""></div>
  <div class="c-loading__spinner"></div>
  <div class="c-loading__content">
    In Progress...
  </div>
</div>

Copy

States

The non-blocking indicator has an in-progress and a completed state.

You're doing it...

In-Progress

Shown when the system action is underway.

Saved

Complete

Shown once the system has completed the action. It will remain on-screen for six seconds

Design Environment

The position of the blocking indicators will always be centered over the gray overlay, either over the entire page or a particular content region. The position of the non-blocking indicator will always appear centered and the top of the user's screen so that it does not interfere with other layout elements. Because they exist in the frame level of the elevation structure, non-blocking action indicators use a medium shadow. The position will always be fixed, regardless of scroll position. When arranging components in the underlying layout, be aware that they will scroll behind the autosave component when it appears.

Microcopy

The label should give theh user an indication of what is happening in the background using a present participle (-ing) verb form, i.e. Downloading, Submitting, Saving. For the completed state of the non-blocking indicator, use the same verb in the simple past tense, i.e. Downloaded, Submitted, Saved.