.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-light-success spinner spinner-darker-success spinner-left mr-3">
Success
</button>
<button type="button" class="btn btn-outline-danger spinner spinner-darker-danger spinner-left mr-3">
Danger
</button>
Use
KTUtil.btnWait()and
KTUtil.btnRelease()utility functions to control button loading state with Javscript. Click to see how the above functions work on the below buttons:
<button type="button" class="btn btn-primary mr-3" id="kt_btn_1">
Primary
</button>
<button type="button" class="btn btn-secondary mr-3" id="kt_btn_2">
Secondary
</button>
<button type="button" class="btn btn-light-success spinner-left mr-3" id="kt_btn_3">
Success
</button>
<button type="button" class="btn btn-outline-danger spinner-left mr-3" id="kt_btn_4">
Danger
</button>
// Demo 1
var btn = KTUtil.getById("kt_btn_1");
KTUtil.addEvent(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-right spinner-white pr-15", "Please wait");
setTimeout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// Demo 2
var btn = KTUtil.getById("kt_btn_2");
KTUtil.addEvent(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-dark spinner-right pr-15", "Loading");
setTimeout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// Demo 3
var btn = KTUtil.getById("kt_btn_3");
KTUtil.addEvent(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-success pl-15", "Disabled...");
setTimeout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// Demo 4
var btn = KTUtil.getById("kt_btn_4");
KTUtil.addEvent(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-danger pl-15", "Please wait");
setTimeout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
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>
