HTML Tutorial

عنصر <progress>

خطوات الاستخدام:

  1. افتح علامة <progress> في بداية نطاق التقدم.
  2. أضف سماتك المطلوبة (انظر أدناه).
  3. أغلق العلامة بعلامة </progress>.

سمات <progress>:

  • value: التقدم الحالي كنسبة مئوية (0-100).
  • max: القيمة القصوى للتقدم (الافتراضي: 1).
  • label: النص المعروض أسفل شريط التقدم (اختياري).

أمثلة:

  • تقدم بسيط:
<progress value="50"></progress>
  • تقدم مع نص:
<progress value="30" label="Loading..."></progress>

مثال HTML لتوضيح علامة <progress>:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the <progress> Tag</title>
</head>
<body>

  <h1>تنزيل الملف...</h1>

  <progress value="50" max="100"></progress>

</body>
</html>

تحسين إمكانية الوصول وسهولة الاستخدام:

  • استخدم السمة label لتوفير معلومات توضيحية عن التقدم.
  • زود النص البديل للصور أو مقاطع الفيديو الموجودة داخل علامة <progress> باستخدام السمة alt.
  • تجنب استخدام علامة <progress> عند عدم وضوح حالة التقدم.