HTML الوسم <progress>

تعريفه

نستخدم الوسم <progress> لعرض شريط تقّدم بهدف إظهار للمسخدم كم تبقى بعد لاكتمال إتماما عملية معنية.
في العادة نقوم بوضع عنوان بجانب الشريط أيضاً بواسطة الوسم <label> و نربطه به كالتالي حتى يعلم المستخدم لما تم وضع الشريط من الأساس.

<label for="progress-id">text</label>
<progress id="progress-id" max="max-val" value="current-val"> val-percent </progress>
	

• مكان الكلمة progress-id نضع id الوسم <progress>.
• مكان الكلمة text نضع عنوان للوسم <progress> للإشارة إلى ما هو الهدف منه.
• مكان الكلمة max-val نضع رقم يمثل أعلى قيمة في الوسم <progress>.
• مكان الكلمة current-val نضع رقم يمثل القيمة الحالية في الوسم <progress>.
• مكان الكلمة val-percent نضع رقم يمثل نسبة الإكتمال حتى يظهر في حال كان المتصفح لا يدعم الوسم <progress>.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <progress>.

خصائصه

الخاصية max

يجب إضافتها للوسم لتحديد أكبر قيمة يمكن الوصول إليها فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية value

يجب إضافتها لتحديد قيمته الحالية و التي يجب أن تكون بين 0 و أكبر قيمة يمكن الوصول إليها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بإضافة وسم <progress> مع تحديد أن أكبر قيمة فيه هي 100 و قيمته الحالية هي 70.

<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
		

جرب الكود

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.