कैसे बनाएं: जेसक्रिप्ट प्रगति पट्टी

प्रगति पट्टी बनाएं

चरण 1 - एचटीएमएल जोड़ें:

<div id="myProgress">
  <div id="myBar"></div>
</div>

चरण 2 - सीएसएस जोड़ें:

#myProgress {
  width: 100%;
  background-color: grey;
}
#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
}

चरण 3 - जेसक्रिप्ट जोड़ें:

जेसक्रिप्ट का उपयोग करके गतिशील प्रगति पट्टी (एनिमेशन इफेक्ट) बनाएं:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

亲自试一试

टैग जोड़ें

यदि आप उपयोगकर्ता को मौजूदा प्रक्रिया के प्रगति को दिखाने वाले टैग को जोड़ना चाहते हैं, तो प्रगति पट्टी के भीतर (या बाहर) एक नए एलीमेंट को जोड़ सकते हैं:

चरण 1 - एचटीएमएल जोड़ें:

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

चरण 2 - सीएसएस जोड़ें:

#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* अनुक्रमित (अगर आवश्यक है) */
  line-height: 30px; /* ऊर्ध्व-मध्यस्थ */
  color: white;
}

亲自试一试

चरण 3 - जेसक्रिप्ट जोड़ें:

यदि आप टैग के भीतर के टेक्स्ट को गतिशील रूप से अद्यतन करना चाहते हैं तो कृपया नीचे दिए गए सामग्री को जोड़ें:

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
        elem.innerHTML = width + "%";
      }
    }
  }
}

亲自试一试