LoadingSpinner

Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden.

import { LoadingSpinner } from "@mittwald/flow-react-components";

<LoadingSpinner />

Best Practices

Setze den LoadingSpinner nur bei unbestimmter Dauer ein. Bei konkret darstellbarem Fortschritt eignet sich eine ProgressBar‍, bei kurzem initialem Laden mit bekannter Layout-Struktur ein Skeleton‍.
Setze ihn nur bei relevanter Ladezeit ein, als Faustregel ab etwa einer Sekunde. Bei sehr kurzen Ladezeiten bringt visuelles Feedback meist keinen Mehrwert.
Kombiniere ihn bei längeren Ladezeiten mit einer IllustratedMessage‍. So erhält der User zusätzliche Informationen.
Platziere ihn dort, wohin der User nach dem Laden schauen soll.
Zeige nicht zu viele Spinner gleichzeitig. Mehrere gleichzeitig wirken schnell unruhig.

Color

Im Standardfall wird der LoadingSpinner in der Color Default verwendet – ein neutraler Ton mit guter Sichtbarkeit, der nicht von der übrigen Benutzeroberfläche ablenkt.

Light und Dark

Auf farbigen oder dekorativen Hintergründen kann der LoadingSpinner in Light oder Dark dargestellt werden. Welche Color wann passt, beschreibt Color‍.

Properties

Property	Type	Default	Description
`color`	`"default" \| "dark" \| "light" \| "dark-static" \| "light-static"`	"default"	The color of the loading spinner.
`size`	`"s" \| "m" \| "l"`	"m"	The size of the icon.
`status`	`"info" \| "success" \| "warning" \| "danger" \| "unavailable"`	-	The elements status. @deprecated Use `color` instead.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.

Components