Components

<!-- spinner border -->
<div class="spinner-border text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
	<span class="sr-only">Loading...</span>
</div>

<!-- button icon : spinner border -->
<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 icon+text : spinner border -->
<button class="btn btn-primary" type="button" disabled>
	<i class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></i>
	Loading...
</button>


<!-- spinner grow -->
<div class="spinner-grow text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
	<span class="sr-only">Loading...</span>
</div>

<!-- button icon : spinner border -->
<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 icon + text : spinner border -->
<button class="btn btn-primary" type="button" disabled>
	<i class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></i>
	Loading...
</button>


									

<!-- 

	spinning icons 
	You can use more icons (stars, etc) to spin.
	Just add .fi-spin class to any icon.

	Size can be changed using Utilities->Font Size
	.fs--30 in this case (30px)

	Color can be changed using color utility:
		.text-primary
		.text-danger
		.text-warning
		.text-info
		.text-dark
		.text-pink
		.text-indigo

-->
<i class="fs--30 fi fi-spin fi-circle-spin text-primary"></i>
<i class="fs--30 fi fi-spin fi-orbit text-primary"></i>
<i class="fs--30 fi fi-spin fi-loading-dots text-primary"></i>
<i class="fs--30 fi fi-spin fi-loading text-primary"></i>

<!-- 
	using with buttons 
	exactly the same as bootstrap, just using fi* icons
-->

<!-- icon only -->
<button class="btn btn-warning" type="button" disabled>
	<span class="fi fi-spin fi-circle-spin" role="status" aria-hidden="true"></span>
	<span class="sr-only">Loading...</span>
</button>

<!-- icon+text  -->
<button class="btn btn-warning" type="button" disabled>
	<i class="fi fi-spin fi-circle-spin" role="status" aria-hidden="true"></i>
	Loading...
</button>