# Loading-Indicator.

## Overview

### What does the component do?

- It shows that a longer-lasting action is being carried out.

### When should the component be used?

- When sending forms.
- When loading or updating an entire page.
- When loading or updating an individual part of a page.

### Rules

- If it takes the system longer than 100ms to display an answer, a loading indicator must be displayed.
- Only one loading indicator can be displayed per page.
- If several areas are downloading data, only one loading indicator can be displayed on the entire page.

## Variants

### Variants

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

#### Default

![Image of the loading indicatior, default](https://digital.sbb.ch/assets/images/mobile/loading-indicator-default-light.webp "Loading Indicatior, default")

![Image of the loading indicatior, default](https://digital.sbb.ch/assets/images/mobile/loading-indicator-default-dark.webp "Loading Indicatior, default")

#### Small

![Image of the loading indicatior, small](https://digital.sbb.ch/assets/images/mobile/loading-indicator-small-light.webp "Loading Indicatior, small")

![Image of the loading indicatior, small](https://digital.sbb.ch/assets/images/mobile/loading-indicator-small-dark.webp "Loading Indicatior, small")

### Specification

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

---

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