Loader

Stylized loading animations for use with components

Without text

With text

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`

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.