spinners

the spinners-element bietet Ladeanzeigen and animations for asynchrone Prozesse. spinners informieren user daruber, that a Operation im background ausgefuhrt wird, and verbessern so the wahrgenommene Reaktionsfahigkeit the Benutzeroberflache.

Installation

the spinners-element ist Teil the Casoon UI Library.

# Installation the gesamten Bibliothek
npm install @casoon/ui-lib

Import

/* Import aller UI-elements */
@import '@casoon/ui-lib/ui.css';

/* or only the spinners-Component */
@import '@casoon/ui-lib/components/spinners.css';

Basic Usage

<div class="spinners"></div>

Sizesvarianten

Extra small (XS)

<div class="spinners spinners--xs"></div>

small (SM)

<div class="spinners spinners--sm"></div>

Mittel (MD, Standard)

<div class="spinners spinners--md"></div>

Gross (LG)

<div class="spinners spinners--lg"></div>

Extra Gross (XL)

<div class="spinners spinners--xl"></div>

Style-Variants

Ring (Standard)

<div class="spinners spinners--ring"></div>

Punkte

<div class="spinners spinners--dots"></div>

Pulsieren

<div class="spinners spinners--pulse"></div>

Springen

<div class="spinners spinners--bounce"></div>

Farbvarianten

Primar

<div class="spinners spinners--primary"></div>

Sekundar

<div class="spinners spinners--secondary"></div>

Hell

<div class="spinners spinners--light"></div>

Dunkel

<div class="spinners spinners--dark"></div>

with Text

<div class="spinners-containers">
  <div class="spinners"></div>
  <span class="spinners-text">Ladt...</span>
</div>

Ladt...

Vollbildschirm-Overlay

<div class="spinners-overlay">
  <div class="spinners spinners--lg"></div>
</div>

Customization

the spinners kann over CSS Variables angepasst become:

:root {
  --color-primary: #3b82f6;     /* Primarfarbe for den spinners */
  --color-gray-300: #d1d5db;    /* Grundfarbe for den spinners-background */
}

Accessibility

for a bessere Accessibility note please folgende Punkte:

• Fugen them geeignete ARIA-attributes hinzu, um den Ladezustand for Screenreader anzukundigen
• use them beschreibenden Text, the angibt, what geladen wird (it sei because, it ist aus dem Kontext offensichtlich)
• ensure, that a ausreichender Kontrast between dem spinners and seinem background besteht
• Fugen them a beschreibendes Label with aria-label or aria-labelledby hinzu

<div class="spinners" role="status" aria-label="content wird geladen"></div>

<!-- or with sichtbarem Text -->
<div class="spinners-containers" role="status">
  <div class="spinners"></div>
  <span class="spinners-text">Benutzerdaten become geladen...</span>
  <span class="sr-only">please warten them, wahrend we Ihre contents load</span>
</div>

Bewahrte Praktiken

• use them spinners, um anzuzeigen, that contents geladen become or a Aktion verarbeitet wird
• Halten them animations subtil and not ablenkend
• use them for langere Vorgange Fortschrittsanzeigen anstelle from unbestimmten Spinnern
• Platzieren them spinners on einer logischen Stelle (where the content erscheinen wird)
• use them for the load on Seitenebene einen Vollbild-Overlay-spinners
• Vermeiden them the gleichzeitige Usage mehrerer spinners in derselben Ansicht
• Erwagen them the add einer Timeout-Nachricht for lang andauernde Vorgange

Browser-Kompatibilitat

the spinners ist with allen modernen Browsern kompatibel:

Function	Chrome	Firefox	Safari	Edge
Grundlegende animation	✅	✅	✅	✅
CSS-animations	✅	✅	✅	✅
Variants	✅	✅	✅	✅

Integration with icons

You can also icons as spinners use, indem them the entsprechenden icon-classes add:

<!-- Tabler icon as spinners -->
<i class="ti ti-loader ti-spin"></i>

<!-- Lucide icon as spinners -->
<i class="lucide-loader lucide-spin"></i>