# Loading-Indicator-Circle

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Indicator
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/loading-indicator-circle/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-loading-indicator-circle--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/loading-indicator-circle/overview (API: https://lyne-angular.app.sbb.ch/angular/components/loading-indicator-circle/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31083-328427
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/loading-indicator-circle

## Elemente

- `sbb-loading-indicator-circle`: It displays a circle loading indicator.

## Verwandte Komponenten

- Ähnlich: [Loading-Indicator](https://digital.sbb.ch/de/design-system/lyne/components/loading-indicator/index.md)

## Übersicht

### Was macht die Komponente?
Der Loading-Indicator-Circle zeigt, dass im Hintergrund eine Aktion läuft und Nutzende warten müssen. Er ist für den Einsatz im Inhalt gedacht, zum Beispiel in einem [Button](https://digital.sbb.ch/de/design-system/lyne/components/button/) oder neben einem Text. Er ist in Rot, Smoke und Weiss verfügbar.

### Wann soll die Komponente eingesetzt werden?
* Um zu zeigen, dass eine Aktion oder ein Prozess läuft und die Anwendung reagiert.
* Wenn das Laden an einer bestimmten Stelle im Inhalt angezeigt wird. Für Overlays eignet sich der [Loading-Indicator](https://digital.sbb.ch/de/design-system/lyne/components/loading-indicator/).

### Regeln.
* Verwende den Indicator nur für Aktionen ab ca. 1 Sekunde. Kürzere Prozesse wirken durch das Aufblitzen verwirrend.
* Zeige ihn in der Regel erst nach 1 Sekunde an. Ist vorab bekannt, dass es länger dauert, darf er sofort erscheinen.
* Eine Mindestanzeigedauer von ca. 500 ms kann sinnvoll sein, ist aber kein Muss.
* Er verändert das Layout nicht. Reserviere den Platz dafür.
* Biete bei langen Wartezeiten (ab ca. 10 Sekunden) eine Fortschrittsanzeige an.
* Soll der Indicator von Screenreadern angesagt werden, wird er in einem Container mit `aria-live` platziert und erhält ein `aria-label`.

## Implementation (Web Components, Englisch)

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

```html
<sbb-loading-indicator-circle></sbb-loading-indicator-circle>
```

It can be slotted in other components (e.g. `<sbb-button>`) in the icon slot.

```html
<sbb-button>
  <sbb-loading-indicator-circle slot="icon"></sbb-loading-indicator-circle>
  Button
</sbb-button>
```

#### Usage

We recommend using the loading indicator only for actions that are expected to take at least one second.
For shorter processes, the indicator may appear as a distracting flash.

The loading indicator should generally be displayed after one second has elapsed since an action has started.
If it is known in advance that the back-end service will take at least one second to respond,
the loading indicator may be displayed immediately.

A minimum display duration of about 500ms can help prevent the indicator from disappearing too quickly,
but is not required and depends on what happens next.

For longer waiting times, especially those of around 10 seconds or more,
consider providing a progress indicator to give users an indication of the remaining time.

### Accessibility

If the `<sbb-loading-indicator-circle>` 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`.

```html
<div class="loader-container" aria-live="polite">
  <sbb-loading-indicator aria-label="Loading, please wait"></sbb-loading-indicator>
</div>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/loading-indicator-circle/api.md