چرخانندههای حاشیهای#
از چرخانندههای حاشیهای برای نمایش بارگذاری سبک استفاده کنید.
<!-- چرخانندههای حاشیهای -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
چرخانندههای رنگی #
شما میتوانید از هر یک از کاربردهای رنگ متن ما در چرخاننده استاندارد استفاده کنید.
<!-- چرخانندههای رنگی -->
<div class="spinner-border text-primary me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-secondary me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-success me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-info me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-warning me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-danger me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
چرخانندههای در حال رشد #
اگر چرخاننده حاشیهای به دلتان نمینشیند، به چرخاننده در حال رشد سوئیچ کنید. در حالی که این واقعاً نمیچرخد، اما به طور مکرر بزرگ میشود!
<!-- چرخانندههای در حال رشد -->
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
چرخانندههای رنگی در حال رشد #
شما میتوانید از هر یک از کاربردهای رنگ متن ما در چرخاننده استاندارد استفاده کنید.
<!-- چرخانندههای رنگی -->
<div class="spinner-grow text-primary me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-secondary me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-success me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-info me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-warning me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-danger me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
تراز بندی #
از کاربردهای فلیکس باکس، کاربردهای شناور یا کاربردهای تراز بندی متن برای قرار دادن چرخانندهها دقیقاً در جایی که به آنها نیاز دارید در هر موقعیتی استفاده کنید.
<!-- چرخانندههای تراز بندی -->
<div class="d-flex justify-content-center border p-2">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
</div>
اندازه #
با اضافه کردن .spinner-border-sm و .spinner-border.sm-** میتوانید یک چرخاننده کوچکتر بسازید که میتواند به سرعت در سایر مؤلفهها استفاده شود.
html
<!-- اندازه چرخانندهها -->
<div class="spinner-border text-primary spinner-border-sm me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-primary spinner-grow-sm me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-border text-primary spinner-border me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
<div class="spinner-grow text-primary spinner-grow me-3" role="status">
<span class="visually-hidden">در حال بارگذاری...</span>
</div>
موقعیت #
از flexbox utilities، float utilities، یا text alignment utilities استفاده کنید تا چرخانندهها را دقیقاً در جایی که به آنها نیاز دارید در هر موقعیتی قرار دهید.
<!-- چرخانندههای موقعیت -->
<div class="d-flex align-items-center border p-2">
<strong>در حال بارگذاری...</strong>
<div class="spinner-border text-primary ms-auto" role="status" aria-hidden="true"></div>
</div>
چرخانندههای دکمهای #
از چرخانندهها درون دکمهها برای نشان دادن اینکه یک عمل در حال پردازش یا در حال انجام است، استفاده کنید. همچنین میتوانید متن را از عنصر چرخاننده تغییر داده و متن دکمه را به دلخواه استفاده کنید.
<!-- چرخانندههای دکمهای -->
<button class="btn btn-primary me-1" type="button" disabled>
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
در حال بارگذاری...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm me-1" role="status" aria-hidden="true"></span>
در حال بارگذاری...
</button>