Aperçu.

Was macht die Komponente?

Der Loading-Indicator-Circle zeigt, dass im Hintergrund eine Aktion läuft und Nutzende warten müssen. Er ist für den Einsatz im Inhalt gedacht, zum Beispiel in einem Button oder neben einem Text. Er ist 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 das Laden an einer bestimmten Stelle im Inhalt angezeigt wird. Für Overlays eignet sich der Loading-Indicator.

Composant similaire.

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.
• Er verändert das Layout nicht. Reserviere den Platz dafür.
• 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.

Spécification.

Web Components.

Le web component se trouve dans le paquet @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.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

class: SbbLoadingIndicatorCircleElement, sbb-loading-indicator-circle.

Properties.