Docs / Spinner

Spinner

vel-src: spinner.css

Loading spinner indicators in multiple sizes, colors, and an alternative dots animation variant.

ClassProperties
vel-spinnerBase spinner — circular border animation, default size
vel-spinner-xsExtra-small size
vel-spinner-smSmall size
vel-spinner-lgLarge size
vel-spinner-xlExtra-large size
vel-spinner-primaryPrimary color border
vel-spinner-successSuccess green border
vel-spinner-dangerDanger red border
vel-spinner-whiteWhite border — for use on dark/colored backgrounds
vel-spinner-dotsThree-dot pulsing animation instead of ring
vel-spinner-glowAdds a colored glow to the spinning ring

Examples

Sizes

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:16px;align-items:center;">
  <div class="vel-spinner vel-spinner-primary vel-spinner-xs"></div>
  <div class="vel-spinner vel-spinner-primary vel-spinner-sm"></div>
  <div class="vel-spinner vel-spinner-primary"></div>
  <div class="vel-spinner vel-spinner-primary vel-spinner-lg"></div>
  <div class="vel-spinner vel-spinner-primary vel-spinner-xl"></div>
</div>

Colors

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;gap:16px;align-items:center;">
  <div class="vel-spinner vel-spinner-primary"></div>
  <div class="vel-spinner vel-spinner-success"></div>
  <div class="vel-spinner vel-spinner-danger"></div>
  <div style="background:#1a2236;padding:8px;border-radius:8px;">
    <div class="vel-spinner vel-spinner-white"></div>
  </div>
</div>

Dots variant

example.html
<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-spinner vel-spinner-dots vel-spinner-primary"></div>
</div>