---
url: /components/loading-indicator/specs.md
description: Loading indicators show the progress of a process for a short wait time
---

# Loading indicator

Loading indicators show the progress of a process for a short wait time

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![2 elements of a loading indicator.](/assets/89947795-ma6gd1jj-1-3p.a330D90F.webp)

1. Loading indicator

| Variant           |  M3 | M3 Expressive |
| ----------------- | :-: | :-----------: |
| Loading indicator |  -- |   Available   |

## Configurations

![2 configurations of loading indicators.](/assets/0bad2f9e-ma6gdew8-2-3p.IQqUROYw.webp)

1. Default
2. Contained

| Category    | Configuration |  M3 | M3 Expressive |
| ----------- | ------------- | :-: | :-----------: |
| Containment | Default       |  -- |   Available   |
| Containment | Contained     |  -- |   Available   |

## Tokens & specs

Loading indicators have a single token set.

::: token-table token-table-68895be451a51c31-07386fca
**Loading indicator tokens** · 1 token set · 8 tokens · [live token table](https://m3.material.io/components/loading-indicator/specs) · DSDB `TOKEN_TABLE.68895be451a51c31`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
* Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Loading indicator** · `md.comp.loading-indicator` · 8 tokens

For loading indicators.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Color | `md.comp.loading-indicator.container.color` (deprecated) | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#E8DEF8` | Dark: `#4A4458` via `md.ref.palette.secondary30`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>High contrast: `#4A4458` via `md.ref.palette.secondary30` |
| Color | `md.comp.loading-indicator.contained.container.color` | Color | `md.sys.color.primary-container` → `md.ref.palette.primary90` | `#EADDFF` | Dark: `#4F378B` via `md.ref.palette.primary30`<br>Medium contrast: `#6750A4` via `md.ref.palette.primary40`<br>High contrast: `#4F378B` via `md.ref.palette.primary30` |
| Color | `md.comp.loading-indicator.contained.active-indicator.color` | Color | `md.sys.color.on-primary-container` → `md.ref.palette.primary30` | `#4F378B` | Dark: `#EADDFF` via `md.ref.palette.primary90`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.primary100`<br>High contrast: `#FFFFFF` via `md.ref.palette.primary100` |
| Color | `md.comp.loading-indicator.active-indicator.color` | Color | `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Size | `md.comp.loading-indicator.container.height` | Length | — | `48dp` | — |
| Size | `md.comp.loading-indicator.container.width` | Length | — | `48dp` | — |
| Size | `md.comp.loading-indicator.active-indicator.size` | Length | — | `38dp` | — |
| Shape | `md.comp.loading-indicator.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
:::

## Anatomy

![2 elements of a loading indicator.](/assets/8767eafe-ma6ge8q8-3-3p.2lQkVmwE.webp)

1. Active indicator
2. Container

## Color

### Default

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For designers, this means working with color values that correspond with tokens; in implementation, a color value will be a token that references a value.

![2 color roles of a loading progress indicator in light and dark themes.: the active indicator is primary and the container is secondary container.](/assets/8462c3d9-ma6geonn-4-3p.DMDroa8t.webp)

Loading indicator color roles used for light and dark schemes:<br>

1. Primary

### Contained

![2 color roles of a loading progress indicator in light and dark themes. The active indicator is primary and the container is secondary container.](/assets/1ce6e8a9-ma6gf51h-5-3p.CcQ6d1K4.webp)

Contained loading indicator color roles used for light and dark schemes:<br>

1. On primary container
2. Primary container

## Measurements

![Loading progress indicator measurements.](/assets/5db6cf2d-ma6gfgvp-6-3p.CfU1IBmq.webp)

To ensure sufficient margins, the size is 48dp while the shape container is 38dp