Skip to main contentCarbon Design System

Loading

Color

ElementPropertyColor token
Large spinnerstroke$interactive
Small spinnerstroke$interactive
background$layer-accent *
Page overlaybackground-color$overlay

Structure

ElementPropertypx / remSpacing token
Large spinnerheight, width88 / 5.5
Small spinnerheight, 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