<progress>: عنصر PROGRESS
آخر تحديث: 2026-10-13
<progress>عنصر PROGRESS
يعرض إنجاز المهمة (مثل الرفع أو التحميل) عبر value/max؛ احذف value لرسوم متحركة للتقدم غير المحدد.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى تدفقي |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </progress> وسم |
| الحالة | قياسي |
📝 البنية
<progress value="70" max="100">70%</progress>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
value | Amount completed; omit for indeterminate progress. | |
max | Total task amount, default 1. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <progress> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： progress لتقدم المهام؛ للقياس بنطاق ثابت استخدم <meter>.
❓ الأسئلة الشائعة
Qماذا يحدث إذا خلا progress من value؟
Aغياب
value يعني «تقدمًا غير محدد» (indeterminate) — يعرض المتصفح حركة انزلاق مستمرة، مناسبة لسيناريو «جارٍ المعالجة دون معرفة النسبة». وكتابة value (بين 0 وmax) تعرض شريط تقدم محددًا.Qما القيمة الافتراضية لسمة max في progress؟
Aالافتراضية max = 1، وعندها تعني
value='0.5' نسبة 50%. وبتعديلها إلى max='100' تُكتب قيمة value مباشرة من 0 إلى 100 بدلالة أوضح. والقيمة الأكبر من max تُقصّر إلى max.Qهل يمكن تخصيص تنسيق progress؟
Aنعم لكن بكتابة عناصر زائفة مسبوقة: في WebKit استخدام
progress::-webkit-progress-bar وprogress::-webkit-progress-value، وفي Firefox progress::-moz-progress-bar. وتوحيد التجميل عبر المتصفحات مكلف؛ وللمتطلبات المعقدة فكّر في رسم شريط التقدم بـ CSS خالص.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
