Spinnerها
< Bootstrap 4:Tutorial(تغییرمسیر از Bootstrap 4:Spinner ها)
پرش به ناوبری
پرش به جستجو
برای ایجاد spinner/loader از کلاس .spinner-border استفاده کنید:[۱]
مثال
<div class="spinner-border"></div>
Spinnerهای رنگی
می‌توان از همهٔ کاربردهای رنگ متن برای اضافه کردن رنگ به spinner استفاده کرد:
مثال
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
Spinnerهای در حال رشد
اگر می‌خواهید spinner بجای چرخیدن، رشد کند، از کلاس .spinner-grow استفاده کنید:
مثال
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
اندازه Spinner
از .spinner-border-sm یا .spinner-grow-sm برای ایجاد spinnerهای کوچک استفاده کنید:
مثال
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
کلیدهای Spinner
می‌توان به spinnerها را به یک کلید، با متن یا بدون متن، اضافه کرد:
مثال
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
منابع آموزشی