اسپینرها (Spinners)
اسپینر بوت استرپ مثل چرخی است که نشان می دهد «در حال بارگذاری» هستیم. «اسپینر (Spinner)» یک آیکن چرخان یا رشدکننده است که صبر کاربر را مدیریت می کند.
اسپینر پایه
برای ساخت اسپینر، از کلاس .spinner-border استفاده کن. این حالت چرخشی است.
<div class="spinner-border"></div>
رنگ های اسپینر
با کلاس های رنگ متن مانند .text-primary رنگ اسپینر را تغییر بده.
<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-danger"></div>
اسپینر رشدکننده
اگر چرخش نمی خواهی، از کلاس .spinner-grow استفاده کن تا به صورت رشد شونده دیده شود.
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
اندازه اسپینر
برای نسخه کوچک تر از .spinner-border-sm یا .spinner-grow-sm کمک بگیر.
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
اسپینر داخل دکمه
می توانی اسپینر را داخل دکمه بگذاری؛ با متن یا بدون متن. برای حالت غیرفعال، ویژگی disabled بگذار.
<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>
نکته: هنگام بارگذاری طولانی، ترکیب اسپینرهای بوت استرپ با نوارهای پیشرفت تجربه بهتری می دهد. همچنین بعدی مناسب برای ناوبری، صفحه بندی است.
گام های تمرینی
- یک اسپینر پایه بساز و رنگش را آبی کن.
- نسخه رشدکننده را اضافه کن و کوچک اش کن.
- اسپینر را داخل دکمه «ارسال» قرار بده.
جمع بندی سریع
.spinner-borderحالت چرخشی می سازد..spinner-growحالت رشدکننده می دهد..text-*رنگ اسپینر را تعیین می کند.-smنسخه کوچک را ارائه می کند.- می توان داخل دکمه اسپینر گذاشت.