FigmaOpenCode

Loader

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

Kurzbeschreibung

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

Beispiele

• EFA Theme
• KERN Theme

Loading...

<kern-loader _show="true"></kern-loader>

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 & Don’ts

• Verwende keine Ladeanzeige, wenn die Wartezeit weniger als eine Sekunde beträgt
• Verwende nicht mehrere Loader gleichzeitig
• Verwende den Loader nicht zusammen mit der Progress-Komponente

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}

Properties

Property	Attribute	Description	Type	Default
_show	_show	Gibt an, ob der Button deaktiviert ist.	boolean | undefined	false