HTML/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")‎.

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

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