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-based spinner requires the SVG markup inside:

<!-- Default size -->
<div class="spinner-random text-primary" role="status">
  <svg viewBox="25 25 50 50">
    <circle />
  </svg>
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Small size -->
<div class="spinner-random spinner-random-sm text-success" role="status">
  <svg viewBox="25 25 50 50">
    <circle />
  </svg>
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Custom size -->
<div class="spinner-random text-danger" style="width: 4rem; height: 4rem;" role="status">
  <svg viewBox="25 25 50 50">
    <circle />
  </svg>
  <span class="visually-hidden">Loading...</span>
</div>

Features

Bootstrap compatible — Uses the same color classes and sizing approach
Smooth stroke animation — More natural than traditional rotation-based spinners
Vector-based — Remains crisp at any size since it's SVG-based
Flexible sizing — Small preset, default size, or custom dimensions

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

💡 For button loading states, see Buttons