إعلان
تعلم الآن

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
6 12 6 11 6 مدعوم مدعوم 6 11 7 مدعوم

خصائصه


الخاصية max

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
6 12 6 11 6 مدعوم مدعوم 6 11 7 مدعوم


الخاصية value

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

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

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
6 12 6 11 6 مدعوم مدعوم 6 11 7 مدعوم

إستخدامه

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

مثال

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

جرب الكود

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

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

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة