Skip to main contentCarbon Design System



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


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


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