Loader

Stylized loading animations for use with components


React Component

Without text

Loading...
Success

With text

Loading...

Success

Sage Component

SageLoader
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
<div class="sage-row">
  <div class="sage-col--md-6 example__block--lg">
    <%= sage_component SageLoader, {
      type: "spinner"
    } %>
  </div>
  <div class="sage-col--md-6 example__block--lg">
    <%= sage_component SageLoader, {
      type: "success"
    } %>
  </div>
</div>
<hr>
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
<div class="sage-row">
  <div class="sage-col--md-6 example__block--lg">
    <%= sage_component SageLoader, {
      type: "spinner",
      text: true
    } %>
  </div>
  <div class="sage-col--md-6 example__block--lg">
    <%= sage_component SageLoader, {
      type: "success",
      text: true
    } %>
  </div>
</div>
Property Description Type Default

type

required

Determines which loader will be used; spinner or success

String

nil

text

Includes text that aligns with the loader.

Boolean

nil

Do
  • Take note that by design, a "reduced motion" OS-level setting will prevent either loader from appearing
Don't
  • Loader animations can be easily overused. Consider setting a loader or spinner on the parent container, instead of on multiple elements.