Spinner
Border spinner use .spinner-border
for a lightweight loading indicator
Loading...
Show Code
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
Growing spinner use .spinner-grow
for growing loading effect
Loading...
Show Code
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
Colors spinner use .text-primary
for colored spinner
Show Code
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-secondary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>
<div class="spinner-border text-warning" role="status"></div>
<div class="spinner-border text-info" role="status"></div>
<div class="spinner-border text-purple" role="status"></div>
<div class="spinner-border text-light" role="status"></div>
<div class="spinner-border text-dark" role="status"></div>
Colors Growing spinner use .text-primary
for colored spinner
Show Code
<div class="spinner-grow text-primary" role="status"></div>
<div class="spinner-grow text-secondary" role="status"></div>
<div class="spinner-grow text-success" role="status"></div>
<div class="spinner-grow text-danger" role="status"></div>
<div class="spinner-grow text-warning" role="status"></div>
<div class="spinner-grow text-info" role="status"></div>
<div class="spinner-grow text-purple" role="status"></div>
<div class="spinner-grow text-light" role="status"></div>
<div class="spinner-grow text-dark" role="status"></div>
Size use .spinner-border-sm
or .spinner-grow-sm .thumb-md
for different sizes
Show Code
<div class="row">
<div class="col-lg-4">
<div class="spinner-border thumb-md text-primary" role="status"></div>
<div class="spinner-border thumb-md text-secondary" role="status"></div>
</div><!-- end col -->
<div class="col-lg-4">
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-secondary" role="status"></div>
</div><!-- end col -->
<div class="col-lg-4">
<div class="spinner-border spinner-border-sm" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>
</div><!-- end col -->
</div>
Buttons spinners use spinners within buttons to indicate an action is currently processing or taking place
Show Code
<div class="row">
<div class="col-lg-6">
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</div><!-- end col -->
<div class="col-lg-6">
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled="">
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
</div><!-- end col -->
</div>