HTML DOM Progress Object - प्रोग्रेस बार एलिमेंट

HTML DOM Progress Object

HTML DOM Progress Object HTML दस्तावेज़ में <progress> एलिमेंट को दर्शाता है। <progress> एलिमेंट किसी कार्य की प्रगति (प्रतिशत पूर्णता) को दर्शाता है।

Progress Object बनाना

document.createElement("PROGRESS");

Progress Object के Properties

उदाहरण

JavaScript का उपयोग करके डायनामिकली प्रोग्रेस बार बनाना:

<!DOCTYPE html>
<html>
<head>
<style>
  body { text-align: center; background-color: #fff; color: #0197F6; }
  h1 { color: #23CE6B; }
  .btn {
    background-color: #fff;
    border: 1.5px dashed #0197F6;
    height: 2rem;
    border-radius: 2px;
    width: 60%;
    margin: 2rem auto;
    display: block;
    color: #0197F6;
    outline: none;
    cursor: pointer;
  }
  p { font-size: 1.2rem; background-color: #db133a; color: #fff; padding: 8px; }
</style>
</head>
<body>
<h1>DOM progress Object Demo</h1>
<button onclick="createProgress()" class="btn">एक प्रोग्रेस ऑब्जेक्ट बनाएं</button>
<script>
  function createProgress() {
    var progressElement = document.createElement("PROGRESS");
    progressElement.setAttribute("value", "60");
    progressElement.setAttribute("max", "100");
    document.body.appendChild(progressElement);
  }
</script>
</body>
</html>

आउटपुट

"एक प्रोग्रेस ऑब्जेक्ट बनाएं" बटन पर क्लिक करने पर एक प्रोग्रेस बार बनेगा जिसका मान 60 और अधिकतम 100 होगा (60% पूर्णता दिखाता हुआ)।

मुख्य बिंदु

• <progress> कार्य पूर्णता प्रतिशत दिखाने के लिए उपयोग किया जाता है
• value वर्तमान प्रगति दर्शाता है, max कुल कार्य दर्शाता है
• यदि max निर्दिष्ट नहीं है, तो यह अनिश्चित (indeterminate) प्रोग्रेस बार दिखाता है
• document.createElement("PROGRESS") से डायनामिकली बना सकते हैं
• value और max को JavaScript से अपडेट करके प्रगति एनिमेट कर सकते हैं
• फॉर्म वैलिडेशन के लिए नहीं, केवल दृश्य प्रगति संकेतक के लिए उपयोग करें