Spinner

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Spinner 01

<div class="spinner spinner-01"></div>

Spinner 02

<div class="spinner spinner-02"></div>

Spinner 03

<div class="spinner spinner-03"></div>

Spinner 04

<div class="spinner spinner-04"></div>

Spinner 05

<div class="spinner spinner-05"></div>

Spinner 06

<div class="spinner spinner-06"></div>

Spinner Whirl 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-01"></div>
	<p>....</p>
</div>

Spinner Whirl 02

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-02"></div>
	<p>....</p>
</div>

Spinner Whirl 03

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-03"></div>
	<p>....</p>
</div>

Spinner Whirl 04

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-04"></div>
	<p>....</p>
</div>

Spinner Whirl 05

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-05"></div>
	<p>....</p>
</div>

Spinner Whirl 06

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum facere cum, iure omnis optio veniam ipsam voluptates. Hic reiciendis, dolores, praesentium iusto obcaecati perspiciatis alias ea aut esse eius aliquam.

<div class="spinner-overlay">
	<div class="spinner spinner-06"></div>
	<p>....</p>
</div>

Spinner colored 01

<div class="spinner spinner-01 spinner-primary"></div>

Spinner colored 02

<div class="spinner spinner-02 spinner-secondary"></div>

Spinner colored 03

<div class="spinner spinner-03 spinner-success"></div>

Spinner colored 04

<div class="spinner spinner-04 spinner-danger"></div>

Spinner colored 05

<div class="spinner spinner-05 spinner-warning"></div>

Spinner colored 06

<div class="spinner spinner-06 spinner-info"></div>