Zum Hauptinhalt springen
FigmaOpenCode

Loader

Synonyme: Ladeanzeige, Loading Indicator, Spinner, Wartekreisel, Spinning Wheel, Loading Spinner
Ähnliche Komponenten: Progress

Kurzbeschreibung​

Ein Loader ist ein animiertes, sich drehendes Symbol, das den Nutzer darauf hinweist, dass ein Inhalt geladen wird.

Beispiele​

Default Loader​

Code anzeigen
<div class="kern-loader kern-loader--visible" role="status">
<span class="kern-sr-only">Wird geladen...</span>
</div>

Beschreibung​

Ein Loader zeigt an, dass ein Lade- oder Rechenprozess im Gange ist. Der Loader ist ein durchgehend animiertes Symbol. Es signalisiert dem Nutzenden, dass die Anfrage bearbeitet wird.

Verwendungsregeln​

Verwende einen Loader dann, wenn die zu erwartende Wartezeit nicht genau bekannt ist, sie aber voraussichtlich über einer Sekunde betragen wird. Bei Anwendung wird der Komponente ein transparenter weißer Hintergrund (Farb-Token in Figma) hinterlegt, so dass der Loader gut sichtbar ist.
Beispiele:

  • Abrufen neuer oder aktualisierter Suchergebnisse.
  • Einloggen in geschützte Bereiche.
  • Download von Inhalten.
  • Laden von umfangreichen Inhalten, z.B. Videos.

Dos und Don’ts​

  • Verwende keine Ladeanzeige, wenn die Wartezeit weniger als eine Sekunde beträgt
  • Verwende nicht mehrere Loader gleichzeitig

Barrierefreiheit​

  • Im CSS kann die Animationsgeschwindigkeit eingestellt (z.B. verlangsamt) werden. Dies greift dann, wenn in den Browsereinstellungen auf „reduced motion“ gestellt wurde:
@media (prefers-reduced-motion) {Setzt die animations-duration beispielsweise auf 2 Sekunden}

Siehe auch: w3.org - Alert Pattern, w3.org - Alert and Message Dialogs Pattern oder magentaA11y

Inhaltsverzeichnis