Data Display

Loading Indicators

Loading indicators show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.

Options

Default Variant

Progress circles are used to visually show the progression of a system operation such as downloading, uploading, processing, etc.

Static Color

When a progress circle needs to be placed on top of a colored background, use the Static Variant. This progress circle uses a static white color regardless of the color theme. Make sure the background offers enough contrast for the progress circle to be legible.

Size

Progress circles come in 3 sizes: small, medium (default), or large. These are available to fit various contexts. For example, the small progress circle can be used in place of an icon or in tight spaces, while the large one can be used for full-page loading.

Loading Dot Pulses

Another option for showing loading and processing information.

Implementation

<svg class="ring" viewBox="25 25 50 50" stroke-width="5"><circle cx="50" cy="50" r="20" /></svg>
<div class="loader"></div>

Information

Checklist

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).

All Color Schemes

Works properly across all color schemes (light, dark).

Accessible Contrast for Text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible Contrast for UI Components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Defined Options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).

Defined Behaviors

Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing Guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization Guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard Interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design Tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI Kit

Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.