Sections

Spinner

A loading spinner is used for indicating a loading state of a page or section. It is colored according to the currently applying font color.

Classes

Section titled Classes
Class Applied to Description
.s-spinner N/A Base loading style that is used almost universally
.s-spinner__xs .s-spinner An extra small loading style for compact layouts
.s-spinner__sm .s-spinner A small style for compact layouts
.s-spinner__md .s-spinner A medium style for larger layouts
.s-spinner__lg .s-spinner A small style for the largest layouts

Examples

Section titled Examples

The spinner’s colors are based on the font color of the element, which will usually be inherited from its parent. If you need to apply a color override, the font color classes can provide themability. In most situations, a black and white spinner based on the default font color will be appropriate.

For accessibility, it’s important to add fallback loading text that is visible to screen readers. Additionally, you should add aria-busy="true" to the component that triggered the loading state while the spinner is shown.

<div class="s-spinner s-spinner__xs">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-spinner s-spinner__sm">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-spinner">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-spinner s-spinner__md">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-spinner s-spinner__lg fc-orange-400">
    <div class="v-visible-sr">Loading…</div>
</div>
Edit on GitHub