Skip to main contentCarbon Design System

Inline loading


ClassPropertyColor token


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

ClassFont-size (px/rem)Font-weightType token
.bx--inline-loading__text14 / 0.875Regular / 400$body-short-01


ClassPropertypx / remSpacing token
Spinnerwidth, height16 / 1
Checkmarkwidth, height16 / 1
Inline loading spinner structure measurements
Inline loading states
Inline loading spinner in context example

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


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 animated_in context example

Example of a inline loading in product context