in English

الغزالون

حدد حالة تحميل أحد المكونات أو الصفحة باستخدام أقراص Bootstrap التي تم إنشاؤها بالكامل باستخدام HTML و CSS وبدون JavaScript.

على هذه الصفحة

حول

يمكن استخدام Bootstrap "spinners" لإظهار حالة التحميل في مشروعاتك. لقد تم إنشاؤها باستخدام HTML و CSS فقط ، مما يعني أنك لست بحاجة إلى أي JavaScript لإنشائها. ومع ذلك ، ستحتاج إلى بعض جافا سكريبت مخصص لتبديل رؤيتها. يمكن تخصيص مظهرها ومواءمتها وحجمها بسهولة من خلال فئات المرافق المذهلة لدينا.

لأغراض إمكانية الوصول ، يشتمل كل محمل هنا role="status"على ملف <span class="visually-hidden">Loading...</span>.

يعتمد تأثير الرسوم المتحركة لهذا المكون على prefers-reduced-motionالاستعلام عن الوسائط. راجع قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .

الدوار الحدودي

استخدم الدوافع الدوارة لمؤشر تحميل خفيف الوزن.

لغة البرمجة

<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-danger" 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-info" 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>

لماذا لا تستخدم border-colorالمرافق؟ تحدد كل أداة تدوير حدية حدًا transparentلجانب واحد على الأقل ، لذلك .border-{color}ستتجاوز الأدوات المساعدة ذلك.

تزايد الدوار

إذا كنت لا تتخيل قرصًا دوارًا حدوديًا ، فقم بالتبديل إلى أداة زيادة التدوير. في حين أنه لا يدور من الناحية الفنية ، فإنه ينمو بشكل متكرر!

لغة البرمجة

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

مرة أخرى ، تم تصميم هذا القرص الدوار currentColor، بحيث يمكنك بسهولة تغيير مظهره باستخدام أدوات ألوان النص . هنا باللون الأزرق ، جنبًا إلى جنب مع المتغيرات المدعومة.

لغة البرمجة

<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-danger" 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-info" 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>

محاذاة

تم تصميم Spinners في Bootstrap باستخدام rems currentColorو و display: inline-flex. هذا يعني أنه يمكن بسهولة تغيير حجمها وإعادة تلوينها ومحاذاتها بسرعة.

حافة

استخدم أدوات الهامش مثل .m-5التباعد السهل.

لغة البرمجة

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

تحديد مستوى

استخدم أدوات Flexbox المساعدة ، أو أدوات الطفو ، أو أدوات محاذاة النص لوضع الأزرار في المكان الذي تريده بالضبط في أي موقف.

ثني

لغة البرمجة

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

جار التحميل...

لغة البرمجة

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

يطفو

لغة البرمجة

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

محاذاة النص

لغة البرمجة

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</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-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

أو استخدم أنماط CSS مخصصة أو أنماط مضمنة لتغيير الأبعاد حسب الحاجة.

لغة البرمجة

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

أزرار

استخدم الأزرار الموجودة داخل الأزرار للإشارة إلى إجراء قيد المعالجة أو قيد التنفيذ حاليًا. يمكنك أيضًا تبديل النص من عنصر الزيادة واستخدام نص الزر حسب الحاجة.

لغة البرمجة

<button class="btn btn-primary" 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>

لغة البرمجة

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-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-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من منهج متغيرات CSS المتطور في Bootstrap ، يستخدم المغزلون الآن متغيرات CSS المحلية .spinner-borderلتحسين .spinner-growالتخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا.

متغيرات الحد الدوار:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

تزايد متغيرات الدوار:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

بالنسبة لكلا القرصين ، يتم استخدام فئات معدِّلات صغيرة لتحديث قيم متغيرات CSS حسب الحاجة. على سبيل المثال ، يقوم .spinner-border-smالفصل بما يلي:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

متغيرات ساس

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

الإطارات الرئيسية

تُستخدم لإنشاء الرسوم المتحركة لـ CSS لأدوات الدوران لدينا. المدرجة في scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}