Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

Loading Indicator

1. What does the component do?

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

2. When should the component be used?

  • When sending forms.
  • 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.
  • The loading indicator is always used on a white, semi-transparent zone.
  • Only one loading indicator can be displayed per page/viewport.
  • The white zone covers the area being loaded or updated.
  • The loading indicator is set to ‘medium’ as standard.

4. Variants

4.1 Tiny

Image of the loading indicator component in the tiny variant

Design specification

Code specification

4.2 Small

Image of the loading indicator in the small variant

Design specification

Code specification

4.3 Medium

Image of the loading indicator component in the medium variant

Design specification

Code specification

4.4 Big

Image of the loading indicator component in the big variant

Design specification

Code specification