.spinnerpseudo element enables spinning effect for any component.Add
.spinnerclass to any element to have a pseudo spinner.
<div class="spinner"></div>
Add
.spinner-trackclass to to have spinner with track bar.
<div class="spinner"></div>
Use
.spinner-leftand
.spinner-rightclases to set spinner aligment.
<div class="spinner spinner-right"></div>
<div class="spinner spinner-left"></div>
Add
.spinner-{color}class to have spinner color options.
<div class="spinner spinner-primary mr-15"></div>
<div class="spinner spinner-success mr-15"></div>
<div class="spinner spinner-danger mr-15"></div>
<div class="spinner spinner-warning mr-15"></div>
<div class="spinner spinner-info mr-15"></div>
<div class="spinner spinner-dark mr-15"></div>
<div class="spinner spinner-track spinner-primary mr-15"></div>
<div class="spinner spinner-track spinner-success mr-15"></div>
<div class="spinner spinner-track spinner-danger mr-15"></div>
<div class="spinner spinner-track spinner-warning mr-15"></div>
<div class="spinner spinner-track spinner-info mr-15"></div>
<div class="spinner spinner-track spinner-dark mr-15"></div>
Add
.spinner-{sm|lg}classes for spinner size options.
<div class="spinner spinner-primary spinner-sm mr-15"></div>
<div class="spinner spinner-primary mr-15"></div>
<div class="spinner spinner-primary spinner-lg mr-15"></div>
<div class="spinner spinner-track spinner-primary spinner-sm mr-15"></div>
<div class="spinner spinner-track spinner-primary mr-15"></div>
<div class="spinner spinner-track spinner-primary spinner-lg mr-15"></div>
Use with
.btnto add spinner effect to buttons and set the alignment with
.spinner-rightand
.spinner-leftclasses.
<button type="button" class="btn btn-primary spinner spinner-white spinner-right">
Primary
</button>
<button type="button" class="btn btn-secondary spinner spinner-dark spinner-right">
Secondary
</button>
<button type="button" class="btn btn-success spinner spinner-white spinner-left">
Success
</button>
<button type="button" class="btn btn-danger spinner spinner-white spinner-left">
Danger
</button>
<button type="button" class="btn btn-outline-primary spinner spinner-darker-primary spinner-right">
Primary
</button>
<button type="button" class="btn btn-outline-secondary spinner spinner-darker-dark spinner-right">
Secondary
</button>
<button type="button" class="btn btn-outline-success spinner spinner-darker-success spinner-left">
Success
</button>
<button type="button" class="btn btn-outline-danger spinner spinner-darker-danger spinner-left">
Danger
</button>
Use with
.form-controlto add spinner effect to form inputs and set the spinner alignment with
.spinner-rightand
.spinner-leftclasses.
<div class="spinner spinner-primary spinner-left">
<input class="form-control mb-5"/>
</div>
<div class="spinner spinner-success spinner-right">
<input class="form-control"/>
</div>
