Navigieren auf digital.sbb.ch

Loading Indicator

1. What does the element do?

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

2. When should the element be used?

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

3. 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.

4. Variants

  • Color: Default (red) / Grey / White
  • Size: Default / Small

4.1 Default

Darstellung des Loading Indicatiors, default
Darstellung des Loading Indicatiors, default

4.2 Small

Darstellung des Loading Indicatiors, small
Darstellung des Loading Indicatiors, small

Design Specification

Figma-Link