HTMLالوسم <progress>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
نستخدم الوسم <progress> لعرض شريط تقّدم بهدف إظهار للمسخدم كم تبقى بعد لاكتمال إتماما عملية معنية.
في العادة نقوم بوضع عنوان بجانب الشريط أيضاً بواسطة الوسم <label> و نربطه به كالتالي حتى يعلم المستخدم لما تم وضع الشريط من الأساس.
<label for="progress-id">text</label>
<progress id="progress-id" max="max-val" value="current-val"> val-percent </progress>
<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>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.
