Version 0.40.0

UI Atoms

Loader

Loader Colors

<span class="sui-a-loader"></span>


<span class="sui-a-loader as--primary"></span>

Loader Sizes

<span class="sui-a-loader as--sm"></span>


<span class="sui-a-loader"></span>


<span class="sui-a-loader as--lg"></span>


<span class="sui-a-loader as--xl"></span>

Loader margins & align with text

Text Text Text Text
<span class="sui-a-loader as--start"></span>
Text


Text
<span class="sui-a-loader as--between"></span>
Text


Text
<span class="sui-a-loader as--end"></span>

Examples with buttons

<button class="sui-a-button as--primary">
  <span class="sui-a-loader as--start"></span>
  My button
</button>


<button class="sui-a-button as--secondary">
  My button
  <span class="sui-a-loader as--end"></span>
</button>


<button class="sui-a-button as--success as--loading">
  My button
  
</button>