تعريفه
نستخدم الوسم <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>
جرب الكود
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
