.spinner pseudo element enables spinning effect for any component.
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>
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);
});
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>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
