بارگذاری‌کننده‌های Bootstrap 5
- صفحه قبل نوار پیشرفت BS5
- صفحه بعدی صفحات BS5
بارگذار
برای ایجاد spinner/بارگذار از .Spinner-border دسته:
مثال
<div class="Spinner-border"></div>
بارگذار رنگی
برای اضافه کردن رنگ به spinner از utilities استفاده کنید:
مثال
<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-info"></div> <div class="Spinner-border text-warning"></div> <div class="Spinner-border text-danger"></div> <div class="Spinner-border text-secondary"></div> <div class="Spinner-border text-dark"></div> <div class="Spinner-border text-light"></div>
بارگذار افزایش یافته
اگر می‌خواهید spinner/بارگذار افزایش یابد تا جایگزین "چرخش" شود، از .Spinner-grow دسته:
مثال
<div class="Spinner-grow text-muted"></div> <div class="spinner-grow text-primary"></div> <div class="spinner-grow text-success"></div> <div class="spinner-grow text-info"></div> <div class="spinner-grow text-warning"></div> <div class="spinner-grow text-danger"></div> <div class="spinner-grow text-secondary"></div> <div class="spinner-grow text-dark"></div> <div class="spinner-grow text-light"></div>
اندازه بارگذار استفاده کنید
لطفاً از .spinner-border-sm یا .spinner-grow-sm بارگذار کوچک‌تر ایجاد کنید:
مثال
<div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div>
دکمه بارگذار
شما همچنین می‌توانید یک بارگذار به دکمه اضافه کنید، با یا بدون متن:
مثال
<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> در حال بارگذاری... </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> در حال بارگذاری... </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> در حال بارگذاری... </button>
- صفحه قبل نوار پیشرفت BS5
- صفحه بعدی صفحات BS5
