4.32.2

Loader

Loading indicator

Demo

function changeLoadingStatus() { const loader = document.querySelector('s-loader#page-loader'); const message = loader.querySelector('[slot="loading-message"]'); if (!loader.hasAttribute('loading')) { loader.setAttribute('loading', ''); message.innerText = "Saving your changes."; } else { loader.removeAttribute('loading'); message.innerText = "Your changes have been saved." } }

API

Tag

Name Description
<s-loader> Custom HTML tag, no content

Slots

Name Required Description
loading-message

Accessible loading message. See Guidelines below.

Attributes

Name Value Required Description
loading Boolean attribute

When present, causes the Loader to animate.
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name Value Required Description
loading Boolean attribute

When present, causes the Loader to animate.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Classes

Name Description
small Decreases the size of the loader.
large Increases the size of the loader.

Demo

API

Tag

Name
<SLoader>

Slots

Name Required Description
loading-message

Accessible loading message. See Guidelines below.

Props

Name Value Required Description
loading Boolean attribute

When true, causes the Loader to animate.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Classes

Name Description
small Decreases the size of the loader.
large Increases the size of the loader.

Skylab React links

General information about using our React package

i18n Strings

ID Description Default value
"sLoader.loading" Loading message for accessibility. Loading.
"sLoader.loadingComplete" Message to indicate the loading is complete, for accessibility. Loading complete.

Guidelines

Accessibility

Use the slot loading-message to add a text indicating that content is loading.

Some JavaScript will be required to change the innerText of slot (so that it reads "loading complete," for instance) once the task is finished and the loader has been hidden.

It is recommended to not remove the loader from the page. Instead, make it hidden by applying the class visually-hidden.

Fix latency first

Many tasks can be delayed or processed in the background, which keeps latency out of the user experience and eliminates the need for Loader. Make the effort to remove or mitigate this latency first, then, if it's truly unavoidable, use Loader.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com