Spinners
.spinner pseudo element enables spinning effect for any component.
Base Examples
Add .spinner class to any element to have a pseudo spinner.
<div class="spinner"></div>
Add .spinner-track class to to have spinner with track bar.
<div class="spinner"></div>
Use .spinner-left and .spinner-right clases 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>
Spinners On Buttons
Use with .btn to add spinner effect to buttons and set the alignment with .spinner-right and .spinner-left classes.
<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);
});
Spinners On Inputs
Use with .form-control to add spinner effect to form inputs and set the spinner alignment with .spinner-right and .spinner-left classes.
<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>
