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 the system requires longer than 100ms to show 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 ‘medium’ loading indicator is used as standard.

4. Variants

4.1 Tiny

Image of the tiny loading indicator component

Design specification

Code specification

4.2 Small

Image of the small loading indicator component

Design specification

Code specification

4.3 Medium

Image of the medium loading indicator component

Design specification

Code specification

4.4 Big

Image of the big loading indicator component

Design specification

Code specification