Loader

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

Classes

Class	Description	Parent	Modifies
`.s-loader`	Base class for the loader component.	N/A	N/A
`.s-loader--sr-text`	Necessary to render the center loader block and renders the accessible text.	`.s-loader`	N/A
`.s-loader__sm`	A small variant of the loader component.	N/A	`.s-loader`
`.s-loader__lg`	A large variant of the loader component.	N/A	`.s-loader`

The base loader component displays three animated squares.

<div class="s-loader">
    <div class="s-loader--sr-text">Loading…</div>
</div>

Loading…

Example	Class	Description
Loading…	`.s-loader.s-loader__sm`	A small variant of the loader component.
Loading…	`.s-loader`	Base class for the loader component.
Loading…	`.s-loader.s-loader__lg`	A large variant of the loader component.