Spinners
Border spinner
Loading...
<div>
<span>Loading...</span>
</div><div>
<span>Loading...</span>
</div>
Growing spinner
Loading...
<div>
<span>Loading...</span>
</div><div>
<span>Loading...</span>
</div>
Colors
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<br><br>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div><div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<br><br>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
Sizing
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<br><br>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div><div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<br><br>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
<div>
<span>Loading...</span>
</div>
In buttons
<button type="button" class="btn btn-primary" disabled="">
<span></span>
<span>Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
Loading...
</button>
<br><br>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
<span>Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
Loading...
</button><button type="button" class="btn btn-primary" disabled="">
<span></span>
<span>Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
Loading...
</button>
<br><br>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
<span>Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled="">
<span></span>
Loading...
</button>
Alignment
Use spacing, flex, float and text utilities to align and place your spinner as needed.
Margin
Loading...
Flex
Loading...
Loading...
Float
Loading...
Text align
Loading...
<h4 class="h5 text-muted mt-3">Margin</h4>
<div>
<span>Loading...</span>
</div>
<h4 class="h5 text-muted mt-3">Flex</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
<div>
<strong>Loading...</strong>
<div>
</div>
<h4 class="h5 text-muted mt-3">Float</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
<h4 class="h5 text-muted mt-3">Text align</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
</div><h4 class="h5 text-muted mt-3">Margin</h4>
<div>
<span>Loading...</span>
</div>
<h4 class="h5 text-muted mt-3">Flex</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
<div>
<strong>Loading...</strong>
<div>
</div>
<h4 class="h5 text-muted mt-3">Float</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
<h4 class="h5 text-muted mt-3">Text align</h4>
<div>
<div>
<span>Loading...</span>
</div>
</div>
</div>