Spinners

Bravo adds a new spinner type with stroke animation that follows Bootstrap's sizing and color conventions.

On this page

Demo

Bootstrap border

Bootstrap grow

Bravo random

Sizes

Small (.spinner-random-sm)

Default (.spinner-random)

Custom size

Colors

Works with Bootstrap's color system:

Usage

The SVG spinner uses minimal markup:

<!-- Default size -->
<div class="spinner-random text-primary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="21"/>
  </svg>
</div>

<!-- Small size -->
<div class="spinner-random spinner-random-sm text-success">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="19.5"/>
  </svg>
</div>

<!-- Custom size -->
<div class="spinner-random text-danger" style="width: 4rem; height: 4rem;">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="21"/>
  </svg>
</div>

<!-- Custom thickness -->
<div class="spinner-random text-info" style="--bs-spinner-stroke-width: .3em;">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="21"/>
  </svg>
</div>

Features

Bootstrap compatible — Uses the same color classes and sizing approach
Material Design animation — Smooth arc growth/shrink effect using stroke-dasharray
SVG-based — Minimal markup with inline geometry attributes for Safari compatibility
Cross-browser — Works reliably in Safari by using inline cx, cy, r attributes
Flexible sizing — Small preset, default size, or custom dimensions
Reduced motion — Respects prefers-reduced-motion for accessibility

Use it anywhere you'd use Bootstrap's spinners but want Material Design animation.

💡 For button loading states, see Buttons