Spin

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Ladeindikator, Spinner, Ladeanzeige, Warteanimation

Beschreibung: Die Spin-Komponente ist ein visueller Ladeindikator, der Nutzer:innen darüber informiert, dass ein Prozess im Hintergrund lädt oder läuft. Sie unterstützt mehrere Animationsvarianten und kann mit einem semantischen Label versehen werden, um die Barrierefreiheit zu gewährleisten.

Beispiel

Standard-Ladeindikator mit der Standardvariante:

<KolSpin _label="Ladeanimation" _show={true} _variant="dot" />

Barrierefreiheit

• Die Komponente benötigt ein semantisches Label über _label, das den Ladezustand beschreibt (z. B. „Inhalte werden geladen"). Dies wird von Screenreadern vorgelesen und informiert Nutzer:innen über den Status.
• Animationen können für Nutzer:innen mit vestibulären oder neurologischen Beeinträchtigungen problematisch sein. Berücksichtigen Sie die Systemeinstellung prefers-reduced-motion und reduzieren Sie die Animationsgeschwindigkeit entsprechend.
• Die Komponente sollte nur dann angezeigt werden, wenn tatsächlich ein Prozess läuft. Verwenden Sie _show zum sicheren Aus- und Einblenden.
• Achten Sie darauf, dass Nutzer:innen nicht unbegrenzt auf ein Laden warten. Setzen Sie Timeouts und zeigen Sie entsprechende Fehlermeldungen an, falls der Prozess fehlschlägt.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Verwenden Sie die Spin-Komponente, um Nutzer:innen über laufende Prozesse zu informieren und Verwirrung zu vermeiden.
• Platzieren Sie Ladeindikatoren an konsistenten Stellen in der Benutzeroberfläche, um die User Experience zu verbessern.
• Vermeiden Sie mehrere gleichzeitige Ladeindikatoren, da dies die Benutzeroberfläche überlasten kann.
• Kombinieren Sie den Ladeindikator mit informativem Text, um Nutzer:innen mitzuteilen, was gerade geladen wird (z. B. „Suchergebnisse werden geladen…").
• Respektieren Sie die Systemeinstellung prefers-reduced-motion, indem Sie Animationen verlangsamen oder deaktivieren, falls die Nutzer:in dies bevorzugt.
• Setzen Sie sinnvolle Timeouts und informieren Sie Nutzer:innen, wenn ein Prozess unerwartet lange dauert.

Anwendungsfälle

• Abrufen neuer oder aktualisierter Suchergebnisse
• Einloggen in geschützte Bereiche und Authentifizierung
• Download und Upload von Inhalten
• Laden von Videos oder großen Mediendateien
• Speichern von Formularinhalten
• Abrufen von Daten aus externen APIs
• Verarbeitung von längeren Rechenvorgängen

FAQ

Kann ich eine benutzerdefinierte Animation verwenden? Ja, mit der Variante _variant="none" können Sie eine eigene Animation über den expert-Slot einbinden. Dies ermöglicht volle Kontrolle über das Animationsdesign.

Wie respektiere ich die Einstellung „Bewegung reduzieren" (prefers-reduced-motion)? Verwenden Sie CSS Media-Queries, um die Animationsdauer zu erhöhen oder Animationen zu deaktivieren, wenn prefers-reduced-motion aktiv ist.

Sollte der Ladeindikator immer mit Text kombiniert werden? Ja, kombinieren Sie den visuellen Indikator mit erklärendem Text oder einem Label, um Klarheit zu schaffen.

Konstruktion / Technik

Playground

<KolSpin _label="Ladeanimation" _show={true} _variant="dot" />

Funktionalitäten (mit Code)

Sichtbarkeitskontrolle

Das Attribut _show bestimmt, ob der Ladeindikator angezeigt wird.

<KolSpin _label="Ladeanimation" _show={true} _variant="dot" />

Animationsvarianten

Die verfügbaren Varianten können über _variant ausgewählt werden: dot, cycle oder none (für benutzerdefinierte Animationen).

<KolSpin _label="Ladeanimation" _show={true} _variant="dot" />

Label und Semantik

Das Attribut _label definiert ein semantisches Label, das von Screenreadern vorgelesen wird.

<KolSpin _label="Ladeanimation" _show={true} _variant="dot" />

Benutzerdefinierte Animationen

Mit _variant="none" können Sie eine eigene Animation über CSS einbinden und diese über den expert-Slot darstellen:

<style>
 /* https://github.com/vineethtrv/css-loader */
 .loader {
  animation: rotation 2s linear infinite;
  border-color: #444;
  border-radius: 50%;
  border-style: solid solid dotted dotted;
  border-width: 3px;
  box-sizing: border-box;
  display: inline-block;
  height: 48px;
  position: relative;
  width: 48px;
 }
 .loader::after {
  animation: rotationBack 1s linear infinite;
  border-color: #ff3d00;
  border-radius: 50%;
  border-style: solid solid dotted;
  border-width: 3px;
  box-sizing: border-box;
  bottom: 0;
  content: '';
  height: 24px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center center;
  width: 24px;
 }

 @keyframes rotation {
  0% {
   transform: rotate(0deg);
  }
  100% {
   transform: rotate(360deg);
  }
 }
 @keyframes rotationBack {
  0% {
   transform: rotate(0deg);
  }
  100% {
   transform: rotate(-360deg);
  }
 }

 @media (prefers-reduced-motion) {
  .loader {
   animation-duration: 6s;
  }
  .loader::after {
   animation-duration: 3s;
  }
 }
</style>

<kol-spin _show _variant="none">
 <span className="loader" slot="expert"></span>
</kol-spin>

API

Properties

Property	Attribute	Description	Type	Default
_label	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string | undefined	undefined
_show	_show	Makes the element show up.	boolean | undefined	undefined
_variant	_variant	Defines which variant should be used for presentation.	"cycle" | "dot" | "none" | undefined	undefined

---