العنصر <progress>

يُمثِّل العنصر <progress> تقدم إكمال مهمة ما، ويُعرَض عادةً على شكل شريط تقدم (progress bar).

مثال عن شريط تقدّم يُظهِر إنجاز المُهمة بنسبة 70%:

<progress value="70" max="100">70%</progress>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي، وعنصر عادي.
المحتوى المسموح	المحتوى العادي، لكن لا يجوز ورود العنصر <progress> ضمنه.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLProgressElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
6.0	6.0	مدعوم	5.2	11.0

أضيف هذا العنصر أوّل مرة إلى HTML5، ولم يكن موجودًا من قبل في HTML 4.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

max

تصف هذه الخاصية ما هو حجم العمل الكلي الذي يُمثِّله العنصر <progrees>، ويجب أن تكون هذه القيمة أكبر من الصفحة وقد تكون عشرية، والقيمة الافتراضية هي 1.

value

تُحدِّد هذه الخاصية كم أنُجِزَ من المهمة، ويجب أن تكون قيمة هذه الخاصية عددًا عشريًا بين 0 وقيمة الخاصية max، أو بين 0 و 1 إذا لم تُحدَّد قيمة للخاصية max.

إن لم تُستعمَل الخاصية value فهذا يُشير إلى أنَّ التقدّم غير معروف (indeterminate)، وهذا يعني أنَّ المهمة قيد التنفيذ لكن لا يُعرَف كم ستستغرق وقتًا أو ما هو الزمن المتوقع لإنهائها.

يمكن استخدام المُحدِّد ‎:indeterminate في CSS لتحديد أشرطة التقدم غير معروفة الحالة، ولتغيير حالة شريط التمرير إلى غير معروفة بعد إعطاء الخاصية value قيمةً ما، فيجب حذف الخاصية باستخدام ‎element.removeAttribute("value")‎.

التنسيق الافتراضي

يختلف تنسيق العنصر <progress> بين المتصفحات. تضبط أغلبية المتصفحات قيمة الخاصية display إلى inline-block، والخاصية height إلى 1em والخاصية width إلى 10em، إضافةً إلى ضبط الخاصية vertical-align إلى ‎-0.2em. أما الخاصية box-sizing فتختلف المتصفحات على قيمتها:

progress {
  display: inline-block;
  height: 1em;
  width: 10em;
  vertical-align: -0.2em;
  box-sizing: border-box|content-box; /* تختلف القيمة حسب المتصفح */
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.