Loader

Stylized loading animations for use with components

React Component

Variants

Bar

Spinner

With text

Without text

Success

With text

Success

Without text

Sage Component

SageLoader

<h2>Variants</h2>

<h3>Bar</h3>
<%= sage_component SageGridRow, {} do %>
  <%= sage_component SageGridCol, { size: 12, css_classes: "example__block--lg" } do %>
    <%= sage_component SageLoader, {
      type: "bar"
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Spinner</h3>
<%= sage_component SageGridRow, {} do %>
  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
    <%= sage_component SageLoader, {
      type: "spinner",
      text: true
    } %>
  <% end %>
  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
    <%= sage_component SageLoader, {
      type: "spinner"
    } %>
  <% end %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Success</h3>
<%= sage_component SageGridRow, {} do %>
  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
    <%= sage_component SageLoader, {
      type: "success",
      text: true
    } %>
  <% end %>
  <%= sage_component SageGridCol, { size: 6, css_classes: "example__block--lg" } do %>
    <h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
    <%= sage_component SageLoader, {
      type: "success"
    } %>
  <% end %>
<% end %>

Property	Description	Type	Default
`fill`	If true, will fill the space within the container.	Boolean	`false`
`text`	Includes text that aligns with the loader.	Boolean	`false`
`type` required	Determines which loader will be used; `bar`, `spinner` or `success`	String	`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.