Spinnerها
پرش به ناوبری
پرش به جستجو
برای ایجاد spinner/loader از کلاس .spinner-border استفاده کنید:[۱]
مثال
<div class="spinner-border"></div>
Spinnerهای رنگی
می‌توان از همهٔ کاربردهای رنگ متن برای اضافه کردن رنگ به spinner استفاده کرد:
مثال
1 <div class="spinner-border text-muted"></div>
2 <div class="spinner-border text-primary"></div>
3 <div class="spinner-border text-success"></div>
4 <div class="spinner-border text-info"></div>
5 <div class="spinner-border text-warning"></div>
6 <div class="spinner-border text-danger"></div>
7 <div class="spinner-border text-secondary"></div>
8 <div class="spinner-border text-dark"></div>
9 <div class="spinner-border text-light"></div>
Spinnerهای در حال رشد
اگر می‌خواهید spinner بجای چرخیدن، رشد کند، از کلاس .spinner-grow استفاده کنید:
مثال
1 <div class="spinner-grow text-muted"></div>
2 <div class="spinner-grow text-primary"></div>
3 <div class="spinner-grow text-success"></div>
4 <div class="spinner-grow text-info"></div>
5 <div class="spinner-grow text-warning"></div>
6 <div class="spinner-grow text-danger"></div>
7 <div class="spinner-grow text-secondary"></div>
8 <div class="spinner-grow text-dark"></div>
9 <div class="spinner-grow text-light"></div>
اندازه Spinner
از .spinner-border-sm یا .spinner-grow-sm برای ایجاد spinnerهای کوچک استفاده کنید:
مثال
1 <div class="spinner-border spinner-border-sm"></div>
2 <div class="spinner-grow spinner-grow-sm"></div>
کلیدهای Spinner
می‌توان به spinnerها را به یک کلید، با متن یا بدون متن، اضافه کرد:
مثال
1 <button class="btn btn-primary">
2 <span class="spinner-border spinner-border-sm"></span>
3 </button>
4
5 <button class="btn btn-primary">
6 <span class="spinner-border spinner-border-sm"></span>
7 Loading..
8 </button>
9
10 <button class="btn btn-primary" disabled>
11 <span class="spinner-border spinner-border-sm"></span>
12 Loading..
13 </button>
14
15 <button class="btn btn-primary" disabled>
16 <span class="spinner-grow spinner-grow-sm"></span>
17 Loading..
18 </button>
منابع آموزشی