Spinners 1.2.2

Lightweight CSS loading indicators in various sizes, colours, and a dots variant. Deutsch: Ladeanzeigen

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Indeterminate busy indicators with .velin-spinner / .velin-spinner-dots while waiting.
Inline loading near a control or region when progress percentage is unknown.

When not

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

Basic spinner

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

Sizes

Add .velin-spinner-sm or .velin-spinner-lg.

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

Colors

Use text colour utilities to change the spinner colour.

<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>

Dots variant

Use .velin-spinner-dots for a three-dot pulsing indicator.

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

Use role="status" and include visually hidden text such as “Loading…” (as in the basic example).
Hide decorative spinner graphics from AT when adjacent text already announces the busy state.