Bootstrap/spinners

وضّح لزوار موقعك حالة التحميل الخاصة بالمكوّن أو الصفحة باستخدام دوّارات الانتظار في Bootstrap، وهي مكوّنات مبنية بالكامل باستخدام HTML و CSS، ولا تستخدم JavaScript.

نظرة عامة

يمكنك استخدَام دوارات الانتظار لإظهار حالة التحميل في صفحاتك. هذه الدوارات مبنية باستخدام HTML و CSS فقط، ما يعني أنك لا تحتاج إلى استعمال جافا سكربت لإنشائها. بيْد أنّك قد تحتاج أحيانًا إلى استخدام بسيط لجافا سكربت لتبديل حالتها بين العرض والإخفاء. يمكن تخصيص مظهرها ومحاذاتها وقياساتها بسهولة باستخدام أصناف مساعدة خاصة.

فيما يخص سهولة الوصول، يتوفّر كل مُحمِّل (loader) على خاصية role="status"‎ ووسم متشعّب ‪<span class="sr-only">جار التحميل...‏</span>‎‎

دوارات الانتظار الإطارية

استخدم دوارات الانتظار الإطارية لعرض حالة التحميل عرضًا خفيفًا.

<div class="spinner-border" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

الألوان

تستخدم الدوارات الإطارية CurrentColor لتلوين إطاراتها (border-color)، ممّا يعني أنه بمقدورك تخصيص اللون باستخدام أصناف تلوين النصوص، إذ يمكنك استخدام أيّ من أصناف تلوين النصوص القياسية على الدوارات.

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

توضيح: السبب في عدم استخدام الأصناف المساعدة border-color، هو أنّ الدوارات الإطارية تجعل واحدا من إطاراتها على الأقل شفافًا transparent في أحد الجوانب، ما يعني أنّ أصناف ‎.border-{color}‎ ستتجاوز ذلك.

دوّارات الانتظار النامية Growing spinner

إذا لم تشأ استخدام الدوارات الإطارية، فاستخدم بدلا منها  دوارات الانتظار النامية. هذه الدوارات لا تدور، إلا أنها تنمو تدريجيا وبتكرار.

<div class="spinner-grow" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

مثل الدوار السابق، يستخدم هذا الدوار  CurrentColor، لذا يمكنك تغيير مظهره بسهولة عبر أصناف تلوين النص. هذا مثال يظهر بعض الألوان المدعومة.

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

المحاذاة

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

الهوامش

استخدام أدوات الهامش المعروفة، مثل ‎.m-5، لتحديد مسافات التباعد.

<div class="spinner-border m-5" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

التموضع

استخدم أدوات Flexbox أو أدوات تعويم العناصر (float) أو أدوات محاذاة النصوص لوضع دوارات الانتظار في المكان الذي تريد بدقة.

• دوارات الانتظار المرنة

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>

</div>
<div class="d-flex align-items-center">
  <strong>... جار التحميل</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

• دوارات الانتظار العائمة

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>

• محاذاة النص

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">... جار التحميل</span>
  </div>
</div>

القياسات

يمكنك تصغير دوارات الانتظار أو تكبيرها عبر إضافة الصنف ‎.spinner-border-sm أو ‎.spinner-grow-sm.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>

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

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">... جار التحميل</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">... جار التحميل</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="sr-only">... جار التحميل</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  ... جار التحميل
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">... جار التحميل</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  ... جار التحميل
</button>

مصادر

• صفحة spinners في توثيق Bootstrap.