وسما شريط التقدم والمقياس <progress> / <meter>

progress يعرض تقدم مهمة (رفع ملف 70%) وmeter يعرض قياسًا ضمن مدى (الممتلئ من القرص) — بدلالة يفهمها الجميع.

شقيقان يُخلط بينهما: progress لمهمة تتقدم نحو الاكتمال (تحميل، رفع، خطوات تسجيل) — وبلا value يتحول لحالة «جارٍ العمل» غير المحددة. أما meter فيعرض قياسًا حاليًّا ضمن مدى معروف (استهلاك، تقييم، قوة كلمة مرور) ويملك عتبات low/high/optimum تلوّنه تلقائيًّا أخضر/أصفر/أحمر.

قاعدة التفريق بسؤال: هل «سيكتمل»؟ progress. أم «قياس لحظي»؟ meter.

الصياغة

<progress value="70" max="100">70%</progress>
<meter value="6" min="0" max="10">6/10</meter>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<p>رفع الملف:</p>
<progress value="70" max="100" style="width:100%">70%</progress>
<p>المساحة المستهلكة:</p>
<meter value="8" min="0" max="10" low="3" high="7" optimum="2" style="width:100%">8/10</meter>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
value / max	القيمة الحالية والحد الأقصى — progress بلا value = غير محدد
low / high / optimum (لـ meter)	عتبات تلوّن المقياس تلقائيًّا حسب الصحة

💡 نصائح عملية

تقدم غير معروف النسبة؟ progress بلا value يعطي حركة «انتظار» مدمجة
قوة كلمة المرور مثال كلاسيكي لـ meter بعتباته الملونة

⚠️ أخطاء شائعة

استخدام progress للقياسات الثابتة (التقييمات) — هذه meter
بناء أشرطة div ملونة يدويًّا وخسارة الدلالة المجانية للوصولية

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs