اسپینرها
وضعیت بارگذاری یک کامپوننت یا صفحه را با اسپینرهای Bootstrap که کاملاً با HTML، CSS و بدون جاوا اسکریپت ساخته شده است، نشان دهید.
اسپینرها در بوت استرپمثال پایه
<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>
رنگ ها
حاشیه چرخان currentColor
برای خود استفاده می کند border-color
، به این معنی که می توانید رنگ را با ابزارهای رنگ متن سفارشی کنید. شما می توانید از هر یک از ابزارهای رنگ متن ما در اسپینر استاندارد استفاده کنید.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
اسپینر در حال رشد
اگر به اسپینر مرزی علاقه ندارید، به اسپینر رشد بروید. در حالی که از نظر فنی نمی چرخد، بارها و بارها رشد می کند!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
رنگ های در حال رشد
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
اندازه
اضافه کنید .spinner-border-sm
و .spinner-grow-sm
یک اسپینر کوچکتر بسازید که می تواند به سرعت در اجزای دیگر استفاده شود.
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
دکمه ها
<button class="btn btn-primary me-1" type="button" disabled="">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button><button class="btn btn-primary" type="button" disabled="">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>