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>

أزرار

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

<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>

Sass

Variables

$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;

Keyframes

Used for creating the CSS animations for our spinners. Included in scss/_spinners.scss.

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

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