Spinner

Border spinner use .spinner-border for a lightweight loading indicator

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

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>