# Loading-Indicator.

## Übersicht

### Was macht die Komponente?

- Zeigt an, dass eine länger dauernde Aktion durchgeführt wird.

### Wann soll die Komponente eingesetzt werden?

- Beim Absenden von Formularen.
- Beim Laden oder Aktualisieren einer gesamten Seite.
- Beim Laden oder Aktualisieren eines einzelnen Bereichs einer Seite.

### Regeln

- Benötigt das System länger als 100ms um eine Antwort anzuzeigen, muss ein Loading Indicator angezeigt werden.
- Es darf pro Seite nur ein Loading Indicator angezeigt werden.
- Wenn mehrere Bereiche Daten nachladen, darf nur ein Loading Indicator über die ganze Seite dargestellt werden.

## Varianten

### Varianten

- Farbe: Default (red) / Grey / White
- Grösse: Default / Small

#### Default

![Darstellung des Loading Indicatiors, default](https://digital.sbb.ch/assets/images/mobile/loading-indicator-default-light.webp "Loading Indicatiors, default")

![Darstellung des Loading Indicatiors, default](https://digital.sbb.ch/assets/images/mobile/loading-indicator-default-dark.webp "Loading Indicatiors, default")

#### Small

![Darstellung des Loading Indicatiors, small](https://digital.sbb.ch/assets/images/mobile/loading-indicator-small-light.webp "Loading Indicatiors, small")

![Darstellung des Loading Indicatiors, small](https://digital.sbb.ch/assets/images/mobile/loading-indicator-small-dark.webp "Loading Indicatiors, small")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=33-538&t=OQ7s4wE6eWI2fLGh-1)

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/loading-indicator/