Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili Deutsch English Loading-Indicator Implementation

The sbb-loading-indicator is a component which can be used to indicate progress status
or an ongoing activity which require some time to complete.

Variants

The component has two different variants.

In window mode, the component completely covers the parent element, preventing interaction with it.

<sbb-loading-indicator variant="window"></sbb-loading-indicator>

While the circle mode can be used inline within another component (e.g. button);
in this case the component adjusts its size to the parent font size.

<sbb-button>
  <sbb-loading-indicator slot="icon" variant="circle"></sbb-loading-indicator>
  Click me
</sbb-button>

Style

In window mode it's possible to define the size of the component, choosing between s (default) and l.

<sbb-loading-indicator variant="window" size="l"></sbb-loading-indicator>

Accessibility

If the sbb-loading-indicator should be announced by screen-readers, use an element with the correct aria attributes
(aria-live set to polite or assertive, and possibly aria-atomic and aria-relevant)
and then append the sbb-loading-indicator on it after giving it the correct aria-label.

<div class="loader-container" aria-live="polite">
  <sbb-loading-indicator
    variant="window"
    size="l"
    aria-label="Loading, please wait"
  ></sbb-loading-indicator>
</div>

Properties

Name Attribute Privacy Type Default Description
variant variant public 'window' | 'circle' | undefined Variant of the loading indicator; circle is meant to be used inline, while window as overlay.
size size public 's' | 'l' 's' Size variant, either s or m.
color color public 'default' | 'smoke' | 'white' 'default' Color variant.
disableAnimation disable-animation public boolean false Whether the animation is enabled.
Beispiele
Window Small Default
Window Small Smoke
Window Small White
Window Large Default
Window Large Smoke
Window Large White
Circle Default
Circle Smoke
Circle White
Accessibility
No Animation
HTML-Markup kopiert.
Playground
Varianten Window Circle Grössen Small Large Farbe Default Smoke White Hintergrund White Milk Iron Charcoal Black
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie