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