HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
To create a spinner/loader, use the .spinner-border class
To create a spinner/loader, use the .spinner-border
class:
<div class="spinner-border"></div>
Use any text color utilites to add a color to the spinner:
<div class="spinner-border text-muted"></div>
<div class="spinner-border
text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border
text-warning"></div>
<div class="spinner-border text-danger"></div>
<div
class="spinner-border text-secondary"></div>
<div class="spinner-border
text-dark"></div>
<div class="spinner-border text-light"></div>
Use the .spinner-grow
class if you want the spinner/loader to grow instead of "spin":
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div
class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Use .spinner-border-sm
or .spinner-grow-sm
to create a smaller spinner:
<div class="spinner-border
spinner-border-sm"></div>
<div class="spinner-grow
spinner-grow-sm"></div>
You can also add spinners to a button, with or without text:
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>