Spinner
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Spinner 01
Click the use code
<div class="spinner spinner-01"></div>
Spinner 02
Click the use code
<div class="spinner spinner-02"></div>
Spinner 03
Click the use code
<div class="spinner spinner-03"></div>
Spinner 04
Click the use code
<div class="spinner spinner-04"></div>
Spinner 05
Click the use code
<div class="spinner spinner-05"></div>
Spinner 06
Click the use code
<div class="spinner spinner-06"></div>
Spinner Whirl 01
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-01"></div>
<p>....</p>
</div>
Spinner Whirl 02
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-02"></div>
<p>....</p>
</div>
Spinner Whirl 03
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-03"></div>
<p>....</p>
</div>
Spinner Whirl 04
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-04"></div>
<p>....</p>
</div>
Spinner Whirl 05
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-05"></div>
<p>....</p>
</div>
Spinner Whirl 06
Click the use code
<div class="spinner-overlay">
<div class="spinner spinner-06"></div>
<p>....</p>
</div>
Spinner colored 01
Click the use code
<div class="spinner spinner-01 spinner-primary"></div>
Spinner colored 02
Click the use code
<div class="spinner spinner-02 spinner-secondary"></div>
Spinner colored 03
Click the use code
<div class="spinner spinner-03 spinner-success"></div>
Spinner colored 04
Click the use code
<div class="spinner spinner-04 spinner-danger"></div>
Spinner colored 05
Click the use code
<div class="spinner spinner-05 spinner-warning"></div>
Spinner colored 06
Click the use code
<div class="spinner spinner-06 spinner-info"></div>
Officia nam sed possimus repellat et, assumenda corporis velit.