Preview.

What does the component do?

The loading indicator shows that an action is running in the background and users have to wait. It is intended for use as an overlay and is available in red, smoke and white.

When should the component be used?

• To show that an action or process is running and the application is responding.
• When an entire area or the whole page is overlaid while loading. For use within content, the loading indicator circle is suitable.

Similar component.

Rules.

• Use the indicator only for actions lasting about 1 second or more. Shorter processes are confusing because of the flashing.
• As a rule, show it only after 1 second. If it is known in advance that it will take longer, it may appear immediately.
• A minimum display duration of about 500 ms can make sense, but is not mandatory.
• For long waiting times (from about 10 seconds), offer a progress indicator.
• If the indicator should be announced by screen readers, place it in a container with aria-live and give it an aria-label.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

The <sbb-loading-indicator> is a component which can be used to indicate progress status
or an ongoing activity which require some time to complete.

Usage.

We recommend using the loading indicator only for actions that are expected to take at least one second.
For shorter processes, the indicator may appear as a distracting flash.

The loading indicator should generally be displayed after one second has elapsed since an action has started.
If it is known in advance that the back-end service will take at least one second to respond,
the loading indicator may be displayed immediately.

A minimum display duration of about 500ms can help prevent the indicator from disappearing too quickly,
but is not required and depends on what happens next.

For longer waiting times, especially those of around 10 seconds or more,
consider providing a progress indicator to give users an indication of the remaining time.

Style.

It's possible to define the size of the component, choosing between s (default), l, xl, xxl, and xxxl.

<sbb-loading-indicator size="l"></sbb-loading-indicator>

Accessibility.

If the <sbb-loading-indicator> should be announced by screen-readers, use an element with the correct aria attributes
(aria-live set to polite or assertive, and possibly aria-atomic and aria-relevant)
and then append the <sbb-loading-indicator> on it after giving it the correct aria-label.

<div class="loader-container" aria-live="polite">
  <sbb-loading-indicator size="l" aria-label="Loading, please wait"></sbb-loading-indicator>
</div>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbLoadingIndicatorElement, sbb-loading-indicator.

Properties.