شريط التحميل Bootstrap 5

شحن

لإنشاء spinner/الشحن، استخدم: .سبنر-حافة فئة:

مثال

<div class="سبنر-حافة"></div>

جرب بنفسك

شحن ملون

استخدم أي لون نصي utilites لإضافة لون إلى spinner:

مثال

<div class="سبنر-حافة text-مظلم"></div>
<div class="سبنر-حافة text-أولوية"></div>
<div class="سبنر-حافة text-نجاح"></div>
<div class="سبنر-حافة text-معلومات"></div>
<div class="سبنر-حافة text-تحذير"></div>
<div class="سبنر-حافة text-خطأ"></div>
<div class="سبنر-حافة text-ثانوية"></div>
<div class="سبنر-حافة text-داكن"></div>
<div class="سبنر-حافة text-فاتح"></div>

جرب بنفسك

شحن نما

إذا كنت ترغب في أن ينمو spinner/الشحن بدلاً من "التحول"، استخدم: .سبنر-نمو فئة:

مثال

<div class="سبنر-نمو text-مظلم"></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>

جرب بنفسك