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 large style for the largest layouts
`.is-loading`	`Any text-based elements`	Prepends a spinner pseudo-element to the element. Prefer using the spinner component when possible.

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-theme-primary">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="is-loading">
    Loading…
</div>

Loading…