Progress indicator

Progress indicators display the length of a process or an otherwise unspecified wait time.

Types

Progress indicators (full screen)

Progress indicators (full screen) display progress by animating an indicator along a circular track in a clockwise direction.

Progress indicators (gap)

Progress indicators (gap) function the same as the full screen variant with the addition of a gap in the circular track.

Small progress indicators

Progress indicators (full screen) display progress by animating an indicator along a circular track in a clockwise direction.

Spinners

Spinners display short, indeterminate activities requiring user attention.

Anatomy

1. Progress indicators (full screen)

A. Track

B. Track progress

2. Progress indicators (gap)

A. Track

B. Track progress

3. Small progress indicators

A. Track (optional)

B. Track progress

4. Spinners

A. Track

B. Track progress

C. Label (optional)

Usage

See the following examples of progress indicators.