Skip to main contentCarbon Design System

Inline loading

Color

ClassPropertyColor token
.cds--loading__backgroundstroke$border-subtle *
.cds--loading__strokestroke$border-interactive
.cds--inline-loading__textcolor$text-secondary
status: finishedsvg$support-success
status: finishedsvg$support-error

* Denotes a contextual color token that will change values based on the layer it is placed on.

Example of inline loading states

Typography

Text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

ElementFont-size (px/rem)Font-weightType token
Text12 / 0.75Regular / 400$label-01

Structure

ClassPropertypx / remSpacing token
Spinnerwidth, height16 / 1
Checkmarkwidth, height16 / 1
Inline loading spinner structure measurements

Placement

The inline loading component should appear during any user action loading. If button is used to trigger the action, the inline loading component should replace that button.

Inline loading spinner in context example

Structure measurements for small and large loading spinner | px / rem