Ladeanzeigen 1.2.0

Leichte CSS-Ladeindikatoren in verschiedenen Größen, Farben und einer Punkte-Variante. English: Ladeanzeigen

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Indeterminate Busy-Indikatoren mit .velin-spinner / .velin-spinner-dots während des Wartens.
Inline-Laden nahe einem Control oder Bereich, wenn der Fortschrittsprozentsatz unbekannt ist.

Wann nicht

Known percent complete — use Fortschritt or Fortschrittsring.
Long-running background jobs that need persistent status copy — pair with text or an Alert, not a spinner alone.

Basis-Ladeanzeige

<div class="velin-spinner" role="status">
  <span class="visually-hidden">Loading…</span>
</div>

Größen

Füge .velin-spinner-sm oder .velin-spinner-lg hinzu.

<div class="velin-spinner velin-spinner-sm"></div>
<div class="velin-spinner"></div>
<div class="velin-spinner velin-spinner-lg"></div>

Farben

Nutze Textfarb-Utilities, um die Spinner-Farbe zu ändern.

<div class="velin-spinner text-primary"></div>
<div class="velin-spinner text-success"></div>
<div class="velin-spinner text-danger"></div>
<div class="velin-spinner text-warning"></div>

Punkte-Variante

Nutze .velin-spinner-dots für einen pulsierenden Drei-Punkte-Indikator.

<div class="velin-spinner-dots" role="status">
  <span></span><span></span><span></span>
  <span class="visually-hidden">Loading…</span>
</div>

Nutze role="status" and include visually hidden text such as “Loading…” (as in the basic example).
Verbirg dekorative Spinner-Grafiken vor AT, wenn benachbarter Text den Busy-Zustand bereits ansagt.