Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Loading-Indicator. Info

Was macht die Komponente?

Ein Loading-Indicator zeigt an, dass eine Aktion oder ein Prozess im Hintergrund ausgeführt wird und Nutzende auf die Beendigung dieses Prozessess warten müssen.

Wann soll die Komponente eingesetzt werden?

  • Um die Nutzenden darüber zu informieren, dass eine Aktion oder ein Prozess im Hintergrund läuft.
  • Um Wartezeiten zu überbrücken.
  • Um Feedback zu geben, dass die Anwendung auf Benutzereingaben reagiert.

Regeln.

  • Verwende den Indicator nur für Aktionen ab ca. 1 Sekunde – kürzere Prozesse wirken durch das Aufblitzen eher verwirrend. Eine kurze Mindestanzeigedauer (Richtwert: ca. 500 ms) kann danach sinnvoll sein, ist aber kein Muss – abhängig davon, was als Nächstes folgt.
  • Achte darauf, dass der Loading-Indicator das Layout der Seite oder Anwendung nicht störend beeinflusst.
  • Biete, wenn möglich, eine Fortschrittsanzeige an, um Nutzenden eine Vorstellung von der verbleibenden Wartezeit zu geben, insbesondere bei langen Wartezeiten (ca. ab 10 Sekunden).
Loading-Indicator-Circle
Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Animation Nein Verfügbar in "Red", "Smoke" und "White". Geeignet für Overlay-Einsatz
Demo

Spielwiese.

Grössen S L XL XXL XXXL Farbe Default Smoke White Mode (System-Einstellung) Light Dark Hintergrund White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
Default.
Auf Storybook ausprobieren HTML einblenden
Minimum Display Time.
Auf Storybook ausprobieren HTML einblenden
Accessibility.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

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.

Use the indicator only for actions lasting at least about 1 second. Shorter processes tend to be confusing due to the flashing.
A brief minimum display duration (guideline: about 500 ms) may be useful afterward, but it is not required, depending on what happens next.

If possible, offer a progress indicator to give users an idea of the remaining waiting time, especially for long waiting times (approx. 10 seconds or more).

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>

API Documentation.

class: SbbLoadingIndicatorElement, sbb-loading-indicator.

Properties.

Name Attribute Privacy Type Default Description
color color public 'default' | 'smoke' | 'white' 'default' Color variant.
size size public 's' | 'l' | 'xl' | 'xxl' | 'xxxl' 's' Size variant, either s or m.