.spinner عنصر اسپینر برای هر مؤلفه را امکان پذیر می کند.
افزودن کلاس .spinner.
<div class="spinner"></div>
افزودن .spinner-track.
<div class="spinner"></div>
استفاده از کلاس .spinner-left و .spinner-right.
<div class="spinner spinner-right"></div>
<div class="spinner spinner-left"></div>
افزودن کلاس .spinner-{color}.
<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>
افزودن .spinner-{sm|lg}.
<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>
با استفاده از .btn اثر اسپینر را روی دکمه ها اضافه کنید و تراز را با کلاس های .spinner-Right و .spinner-left تنظیم کنید..
<button type="button" class="btn btn-primary spinner spinner-white spinner-right">
اولیه
</button>
<button type="button" class="btn btn-secondary spinner spinner-dark spinner-right">
ثانویه
</button>
<button type="button" class="btn btn-light-success spinner spinner-darker-success spinner-left mr-3">
موفقیت
</button>
<button type="button" class="btn btn-outline-danger spinner spinner-darker-danger spinner-left mr-3">
هشدار
</button>
استفاده KTUtil.btnWait () و KTUtil.btnRelease () برای کنترل حالت بارگیری دکمه با جاوا اسکریپت استفاده کنید.
<button type="button" class="btn btn-primary mr-3" id="kt_btn_1">
اولیه
</button>
<button type="button" class="btn btn-secondary mr-3" id="kt_btn_2">
ثانویه
</button>
<button type="button" class="btn btn-light-success spinner-left mr-3" id="kt_btn_3">
موفقیت
</button>
<button type="button" class="btn btn-outline-danger spinner-left mr-3" id="kt_btn_4">
هشدار
</button>
// نسخه ی نمایشی 1
var btn = KTUtil.getById("kt_btn_1");
KTUtil.addرویداد(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-right spinner-white pr-15", "Please wait");
setزمانout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// نسخه ی نمایشی 2
var btn = KTUtil.getById("kt_btn_2");
KTUtil.addرویداد(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-dark spinner-right pr-15", "Loading");
setزمانout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// نسخه ی نمایشی 3
var btn = KTUtil.getById("kt_btn_3");
KTUtil.addرویداد(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-success pl-15", "غیرفعال...");
setزمانout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
// نسخه ی نمایشی 4
var btn = KTUtil.getById("kt_btn_4");
KTUtil.addرویداد(btn, "click", function() {
KTUtil.btnWait(btn, "spinner spinner-left spinner-darker-danger pl-15", "Please wait");
setزمانout(function() {
KTUtil.btnRelease(btn);
}, 1000);
});
با استفاده از .form-control برای افزودن اثر اسپینر به فرم ورودی ها و تنظیم تراز اسپینر با کلاسهای .spinner-Right و .spinner-left .
<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>
