कैसे करें - जावास्क्रिप्ट प्रोग्रेस बार
जावास्क्रिप्ट का उपयोग करके प्रगति पट्टी बनाने का तरीका जानें।
एक प्रगति पट्टी बनाना
चरण 1) HTML जोड़ें:
उदाहरण
<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) HTML जोड़ें:
उदाहरण
<div id="myProgress">
<div id="myBar">10%</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
#myBar {
width: 10%;
height:
30px;
background-color: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
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 + "%";
}
}
}
}