HTML Tutorial

عنصر <meter>

استخدام العنصر <meter>:

  • يعرض العنصر <meter> قياسًا رقميًا ضمن نطاق محدد، مثل تقدم تحميل الملف أو مستوى الصوت.

خصائص العنصر <meter>:

  • min: القيمة الدنيا للنطاق.
  • max: القيمة العظمى للنطاق.
  • value: القيمة الحالية.
  • low: قيمة الحد الأدنى لتغيير لون مقياس التقدم (افتراضيًا: 0).
  • high: قيمة الحد الأقصى لتغيير لون مقياس التقدم (افتراضيًا: 1).
  • optimum: قيمة الحد الأمثل لتغيير لون مقياس التقدم (افتراضيًا: 1).

أمثلة الاستخدام:

<meter min="0" max="100" value="75"></meter>

هذا المثال يعرض مقياس تقدم بنسبة 75٪.

<meter min="0" max="100" value="75" low="25" high="75" optimum="50"></meter>

هذا المثال يعرض مقياس تقدم بنسبة 75٪، حيث يتغير اللون عندما يكون أقل من 25٪ أو أعلى من 75٪. أما اللون الأمثل فيكون عند 50٪.

مثال HTML لعرض العنصر <meter>:

<!DOCTYPE html>
<html>
<body>

<h1>مقياس تقدم التحميل</h1>

<progress id="progress-bar" value="0" max="100"></progress>

<script>
  // تحديث شريط التقدم أثناء تحميل الصفحة
  window.onload = function() {
    var progress = document.getElementById("progress-bar");
    var percentage = 0;

    // زيادة القيمة بنسبة 1٪ كل 100 مللي ثانية
    var timer = setInterval(function() {
      percentage += 1;
      progress.value = percentage;

      // عند الوصول إلى 100٪، قم بإيقاف المؤقت
      if (percentage == 100) {
        clearInterval(timer);
      }
    }, 100);
  };
</script>

</body>
</html>