Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Loading

Color

ClassPropertyColor token
.bx--loading__svgstroke$interactive-04
.bx--loading--smallstroke$interactive-04
.bx--loading-overlaybackground-colorrgba($ui-02, 0.6)

Structure

ClassPropertypx / remSpacing token
.bx--loadingheight, width88 / 5.5–
.bx--loading--smallheight, width16 / 1–
Large spinner structure measurements

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

Placement

The large loading spinner should appear centered over a page or content that it is loading. Please note that the top-level navigation is not included in the page loading overlay.

Large spinner in context example

Example of a large loading spinner in product context