W3.CSS प्रोग्रेस बार्स
एक प्रगति पट्टी का उपयोग यह दिखाने के लिए किया जा सकता है कि उपयोगकर्ता प्रक्रिया में कितनी दूर है:
बेसिक प्रोग्रेस बार
एक सामान्य <div> तत्व का उपयोग प्रगति पट्टी के लिए किया जा सकता है।
सीएसएस चौड़ाई संपत्ति का उपयोग प्रगति पट्टी की ऊंचाई और चौड़ाई निर्धारित करने के लिए किया जा सकता है।
उदाहरण
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
प्रगति बार चौड़ाई
CSS चौड़ाई संपत्ति (0 से 100% तक) के साथ प्रगति पट्टी की चौड़ाई बदलें :
उदाहरण
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
प्रगति बार रंग
प्रगति पट्टी का रंग बदलने के लिए w3- रंग वर्गों का उपयोग करें :
उदाहरण
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
प्रगति बार लेबल
प्रगति पट्टी में लेबल जोड़ने के लिए w3-कंटेनर तत्व के अंदर टेक्स्ट जोड़ें ।
लेबल को केंद्र में रखने के लिए w3- केंद्र वर्ग का उपयोग करें । यदि छोड़ा गया है, तो इसे संरेखित छोड़ दिया जाएगा।
उदाहरण
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
प्रगति पट्टी पाठ का आकार
कंटेनर में टेक्स्ट का आकार बदलने के लिए w3- आकार की कक्षाओं का उपयोग करें :
उदाहरण
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
प्रगति बार पैडिंग
कंटेनर में पैडिंग जोड़ने के लिए w3-पैडिंग क्लासेस का उपयोग करें ।
उदाहरण
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
गोल प्रगति बार्स
प्रगति पट्टी में गोल कोनों को जोड़ने के लिए w3-राउंड कक्षाओं का उपयोग करें :
उदाहरण
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
गतिशील प्रगति बार
गतिशील प्रगति पट्टी बनाने के लिए जावास्क्रिप्ट का प्रयोग करें:
उदाहरण
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
लेबल के साथ गतिशील प्रगति पट्टी
केंद्रित लेबल:
उदाहरण
वाम-संरेखित लेबल:
उदाहरण
प्रगति पट्टी के बाहर लेबल:
उदाहरण
20%
एक और उदाहरण (उन्नत):
उदाहरण
Added 0 of 10 photos