شريط التقدم (Progress)

مستندات وأمثلة لاستخدام أشرطة التقدم المخصصة في الـ Bootstrap والتي تتميز بدعم الأشرطة المكدسة، والخلفيات المتحركة، وتسميات النصوص.

في هذه الصفحة

تنسيق جديد في v5.3.0 — لقد جعلنا بنية الـ HTML السابقة لأشرطة التقدم مستبعدة واستبدلناها بأخرى أكثر توافقاً مع معايير الوصول. ستستمر البنية السابقة في العمل حتى الإصدار v6. راجع ما الذي تغير في دليل الهجرة الخاص بنا.

كيف يعمل ؟

تعتمد مكونات أشرطة التقدم على عنصرين من الـ HTML، وبعض من الـ CSS لتحديد العرض، وبضعة سمات. نحن لا نستخدم عنصر <progress> في HTML5، مما يضمن لك القدرة على تكديم أشرطة التقدم، وتحريكها، ووضع تسميات نصية فوقها.

نستخدم .progress كغلاف للإشارة إلى القيمة القصوى لشريط التقدم.
يتطلب غلاف .progress أيضاً سمة role="progressbar" وسمات aria لجعله متاحاً، بما في ذلك اسم متاح (باستخدام aria-label، أو aria-labelledby، أو ما شابه).
نستخدم .progress-bar الداخلية فقط للشريط المرئي والتسمية.
تتطلب .progress-bar نمطاً مضمناً (inline style)، أو فئة مساعدة (utility class)، أو CSS مخصصاً لتحديد عرضها.
نوفر فئة .progress-stacked خاصة لإنشاء أشرطة تقدم متعددة أو مكدسة.

عند تجميع كل ذلك، ستحصل على الأمثلة التالية.

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

تحجيم الشريط

العرض (Width)

توفر الـ Bootstrap مجموعة من الأدوات المساعدة لضبط العرض. وبناءً على احتياجاتك، قد تساعد هذه الأدوات في تكوين عرض الـ .progress-bar بسرعة.

html

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar w-75"></div>
</div>

الإرتفاع (Height)

تقوم فقط بتعيين قيمة height على غلاف .progress، لذا إذا قمت بتغيير هذه القيمة، فإن .progress-bar الداخلية ستتغير حجمها تلقائياً وفقاً لذلك.

html

<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

التسميات

أضف تسميات إلى أشرطة التقدم الخاصة بك عن طريق وضع نص داخل .progress-bar.

25%

html

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

التسميات الطويلة

لاحظ أنه بشكل افتراضي، يتم التحكم في المحتوى الموجود داخل .progress-bar باستخدام overflow: hidden، لذا فهو لا يخرج عن حدود الشريط. إذا كان شريط التقدم الخاص بك أقصر من تسميته، فسيتم قص المحتوى وقد يصبح غير قابل للقراءة. لتغيير هذا السلوك، يمكنك استخدام .overflow-visible من أدوات التحكم في التجاوز (overflow utilities).

التسميات الأطول من شريط التقدم الموجود بداخلها قد لا تكون متاحة بالكامل باستخدام هذه الطريقة لأنها تعتمد على أن يكون للون النص نسبة تباين صحيحة مع كل من ألوان خلفية .progress و .progress-bar. توخَّ الحذر عند تنفيذ هذا المثال.

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

الخلفيات

استخدم فئات الأدوات المساعدة للخلفية لتغيير مظهر أشرطة التقدم الفردية.

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

إذا كنت تضيف تسميات إلى أشرطة التقدم ذات لون خلفية مخصص، فتأكد أيضاً من تعيين لون نص مناسب، بحيث تظل التسميات مقروءة وذات تباين كافٍ. نوصي باستخدام الفئات المساعدة لـ اللون والخلفية.

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-info" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
</div>

أشرطة متعددة

يمكنك تضمين مكونات تقدم متعددة داخل حاوية باستخدام .progress-stacked لإنشاء شريط تقدم مكدس واحد. لاحظ أنه في هذه الحالة، يجب تطبيق التنسيق الخاص بتحديد العرض المرئي لشريط التقدم على عناصر .progress، بدلاً من عناصر .progress-bar.

html

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
    <div class="progress-bar"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
    <div class="progress-bar bg-success"></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

المخططة

أضف .progress-bar-striped إلى أي .progress-bar لتطبيق خطوط عبر تدرج CSS فوق لون خلفية شريط التقدم.

html

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

خطوط متحركة

يمكن أيضاً تحريك التدرج المخطط. أضف .progress-bar-animated إلى .progress-bar لتحريك الخطوط من اليمين إلى اليسار عبر رسوم CSS3 المتحركة.

html

<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

الـ (CSS)

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

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

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

scss/_progress.scss

--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

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

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

الإطارات الرئيسية (Keyframes)

تُستخدم لإنشاء رسوم الـ CSS المتحركة للفئة .progress-bar-animated. متضمنة في scss/_progress-bar.scss.

scss/_progress.scss

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: var(--#{$prefix}progress-height); }
  }
}