Vorschau.

Was macht die Komponente?

Der Loading-Indicator zeigt, dass im Hintergrund eine Aktion läuft und Nutzende warten müssen. Er ist für den Einsatz als Overlay gedacht und in Rot, Smoke und Weiss verfügbar.

Wann soll die Komponente eingesetzt werden?

• Um zu zeigen, dass eine Aktion oder ein Prozess läuft und die Anwendung reagiert.
• Wenn ein ganzer Bereich oder die ganze Seite während des Ladens überlagert wird. Für den Einsatz im Inhalt eignet sich der Loading-Indicator-Circle.

Ähnliche Komponente.

Regeln.

• Verwende den Indicator nur für Aktionen ab ca. 1 Sekunde. Kürzere Prozesse wirken durch das Aufblitzen verwirrend.
• Zeige ihn in der Regel erst nach 1 Sekunde an. Ist vorab bekannt, dass es länger dauert, darf er sofort erscheinen.
• Eine Mindestanzeigedauer von ca. 500 ms kann sinnvoll sein, ist aber kein Muss.
• Biete bei langen Wartezeiten (ab ca. 10 Sekunden) eine Fortschrittsanzeige an.
• Soll der Indicator von Screenreadern angesagt werden, wird er in einem Container mit aria-live platziert und erhält ein aria-label.

Spezifikation.

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Dokumentation.

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.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbLoadingIndicatorElement, sbb-loading-indicator.

Properties.