Preview.

What does the component do?

The loading indicator circle shows that an action is running in the background and users have to wait. It is intended for use within content, for example in a button or next to a text. It 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 loading is displayed at a specific place within the content. For overlays, the loading indicator 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.
• It does not change the layout. Reserve the space for it.
• 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-circle> is a component which can be used to indicate progress status
or an ongoing activity which require some time to complete.

<sbb-loading-indicator-circle></sbb-loading-indicator-circle>

It can be slotted in other components (e.g. <sbb-button>) in the icon slot.

<sbb-button>
  <sbb-loading-indicator-circle slot="icon"></sbb-loading-indicator-circle>
  Button
</sbb-button>

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.

Accessibility.

If the <sbb-loading-indicator-circle> 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 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: SbbLoadingIndicatorCircleElement, sbb-loading-indicator-circle.

Properties.