Was macht die Komponente?
Ein Loading-Indicator-Circle 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 Loading-Indicator nur für Aktionen, die länger als eine kurze Momentaufnahme dauern.
- 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.
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 2 | Animation | Nein | Verfügbar in "Red", "Smoke" und "White". Geeignet für Inline-Einsatz |
Spielwiese
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.
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>
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. |