Navigieren auf digital.sbb.ch

Beta

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 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/viewport.
  • If several areas are downloading data, only one loading indicator can be displayed on the entire page.
  • The loading indicator is always used on a white, semi-transparent zone.
  • 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