مؤشرات التحميل (Spinners)

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

في هذه الصفحة

حول (About)

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

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

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

مؤشر التحميل ذو الحدود (Border spinner)

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

html

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

الألوان

يستخدم مؤشر التحميل ذو الحدود currentColor لـ border-color الخاص به، مما يعني أنه يمكنك تخصيص اللون باستخدام أدوات ألوان النصوص. يمكنك استخدام أي من أدوات ألوان النصوص لدينا على مؤشر التحميل القياسي.

html

<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} ستلغي ذلك.

مؤشر التحميل المتنامي

إذا كنت لا تفضل مؤشر التحميل ذو الحدود، فاستخدم مؤشر التحميل المتنامي. بينما هو لا يدور تقنياً، إلا أنه ينمو بشكل متكرر!

html

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

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

html

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

المحاذاة (Alignment)

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

الهامش (Margin)

استخدم أدوات الهوامش (margin) مثل .m-5 للحصول على تباعد سهل.

html

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

الموضع (Placement)

استخدم أدوات (flexbox) أو أدوات التعويم (float utilities) أو أدوات محاذاة النصوص (text alignment) لوضع مؤشرات التحميل بالضبط حيث تحتاجها في أي موقف.

المرونة (Flex)

html

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

Loading...

html

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

التعويم (Floats)

html

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

محاذاة النصوص

html

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

الحجم

أضف .spinner-border-sm و .spinner-grow-sm لإنشاء مؤشر تحميل أصغر يمكن استخدامه بسرعة داخل المكونات الأخرى.

html

<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 المخصص أو الأنماط المضمنة (inline styles) لتغيير الأبعاد حسب الحاجة.

html

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

الأزرار

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

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on .spinner-border and .spinner-grow for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

متغيرات مؤشر التحميل ذو الحدود:

scss/_spinners.scss

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

متغيرات مؤشر التحميل المتنامي:

scss/_spinners.scss

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

بالنسبة لكلا مؤشري التحميل، يتم استخدام فئات (classes) تعديل مؤشر التحميل الصغير لتحديث قيم متغيرات CSS هذه حسب الحاجة. على سبيل المثال، تقوم الفئة .spinner-border-sm بما يلي:

scss/_spinners.scss

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

متغيرات الـ (Sass)

scss/_variables.scss

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

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

scss/_spinners.scss

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

scss/_spinners.scss

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