Progress

COMPONENTS

Progress indicators provide feedback to the user regarding the percentage of completion of a task, workflow or system.

View GSUI Toolkit Documentation (Internal Only)

View in Figma (Internal Only)

Anatomy

Process Label
Completion Indicator
Track
Completion Label

Appearance

Shape

Progress has two available shapes — bar or a circle, with bar being the default shape.

Labels

Progress can be used with or without labels. There are two optional labels available, one to describe process and one to display a completion value.

Status

Status can be displayed to the user through color. All progress indicators must have a status assigned. Most progress indicators should be set to have status set to "information". If a status is not set, then the status will be set to none by default.

Sizes

Progress indicators can be displayed in large, medium or small sizes.

Examples

User Progress

User progress can be shown over the course of minutes, hours or days and may persist on the page.

System Progress

System progress is typically a temporary animated display showing a short term application process.

Inner Labels

Custom inner labels can be added to the progress bar.

Trade Progress

Trade progress is specific to trade activity and is often embedded within a Data Grid.

Guidelines

Use labels to indicate to the user what process is being tracked.
Position Progress indicators in the center of a screen for general functions.
For discrete tasks within a screen, position a Progress indicator adjacent to that task.
Do not use Progress indicators for complex tasks with distinct milestones, instead use Steps.

Steps

Steps visualize a set of related steps or a sequence of process defined by user milestones.

Writing Guidelines

Guidelines for the best words, with the right voice and tone, to help users efficiently complete their tasks.

Contents