Loader
Stylized loading animations for use with components
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 |
---|---|---|---|
|
Determines which loader will be used; |
String |
|
|
Includes text that aligns with the loader. |
Boolean |
|
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.