Progress Indicator

An animated indication that some form of network request or processing pending.

Overview

The Progress Indicator provides visual feedback to the user that an application is currently processing or retrieving data. Its purpose is to show that the application has not stalled - rather it is still running, however cannot update the UI with the newly requested or processed data.

The Progress Indicator component LOADING…

Usage

The Progress Indicator should be used when processing or retrieving data. It should be used to convey a delay in the loading of data, indicating a network request may be taking longer than usual to complete.

Anatomy

Anatomy of the Progress Indicator component.Loading label2Indicator Animation1LOADING…
  1. Indicator Animation. An SVG spinner that rotates to provide feedback to the user that the application is loading, rather than hung.
  2. Loading Label. Accompanies the Indicator Animation to provide written context to the spinner.

Hierarchy & Placement

The Progress Indicator can either be used as a full screen overlay, or within an individual component. Use the indicator full screen when the application is on first load. Individual components should have the progress indicator displayed when they are retrieving data, yet don't have anything to display yet.

Basic Usage

<ProgressIndicator />

Properties

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCSS modifier class to add to the component