Loader

Svelte

The Loader indicates an active wait state for a page, section, or interactive element.

Classes

Class	Applied to	Description
`.s-loader--block`	N/A	Base block loading style that displays three animated squares
`.s-loader--block__sm`	`.s-loader--block`	A small style for compact layouts
`.s-loader--block__lg`	`.s-loader--block`	A large style for the largest layouts

Examples

Section titled Examples

Blocks

Section titled Blocks

Use the Blocks variant as the standard loader for general UI states. This is the most common style and utilizes a monochrome black and gray palette.

<div class="s-loader--block s-loader--block__sm">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-loader--block">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="s-loader--block s-loader--block__lg fc-theme-primary">
    <div class="v-visible-sr">Loading…</div>
</div>
<div class="is-loading">
    Loading…
</div>

Loading…