Loading Spinner
Add data-state="loading" or .nds-loading to any container to dim its content and show a centered spinner
Default Loading
Content is dimmed while loading
<div data-state="loading">
<p>Content is dimmed while loading</p>
</div>
<!-- Or use class toggle -->
<div class="nds-loading">
<p>Content is dimmed while loading</p>
</div>
On-color Loading (Dark Background)
Content is dimmed while loading
<div class="nds-loading nds-oncolor">
Content hidden while loading
</div>
Size Variants
Loading spinners are available in 7 sizes: xxs (20px), xs (24px), sm (28px), md (32px default), lg (36px), xl (40px), 2xl (44px)
All Sizes
<div class="nds-loading nds-xxs">...</div> <!-- 20px -->
<div class="nds-loading nds-xs">...</div> <!-- 24px -->
<div class="nds-loading nds-sm">...</div> <!-- 28px -->
<div class="nds-loading">...</div> <!-- 32px (default) -->
<div class="nds-loading nds-lg">...</div> <!-- 36px -->
<div class="nds-loading nds-xl">...</div> <!-- 40px -->
<div class="nds-loading nds-2xl">...</div> <!-- 44px -->