# LoadingSpinner

Der LoadingSpinner signalisiert dem User, dass Inhalte im Hintergrund geladen werden und in Kürze verfügbar sind.

## Overview

# Playground

Verwende `<LoadingSpinner>`, um einen LoadingSpinner darzustellen.

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

<LoadingSpinner />
```

---

# Color

Im Standardfall wird der LoadingSpinner in der Color **Default** verwendet.
Diese ist in einem neutralen Ton gehalten, um gute Sichtbarkeit zu
gewährleisten, ohne von der übrigen Benutzeroberfläche abzulenken.

## Light und Dark

Zusätzlich zur Standard-Color kann der LoadingSpinner auch in den Varianten
**Light** und **Dark** dargestellt werden. Beide Colors eignen sich, wenn die
Standard-Color auf farbigen oder dekorativen Hintergründen nicht genug Kontrast
bietet.

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

<LoadingSpinner color="light" />
```

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

<LoadingSpinner color="dark" />
```

**Light:** Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL
Lightness-Wert von weniger als 50.

**Dark:** Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem
HSL Lightness-Wert von größer als 50.