Spinners

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

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>