Spinnerها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

برای ایجاد 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>


مشاهدهٔ نتیجه



منابع آموزشی