HTML
प्रगति तत्व
खोज…
पैरामीटर
| पैरामीटर | मूल्य |
|---|---|
| अधिकतम | कुल कितने कार्य की आवश्यकता है |
| मूल्य | कितना काम पहले ही पूरा हो चुका है |
| स्थान | यह विशेषता <progress> तत्व की वर्तमान स्थिति लौटाती है |
| लेबल | यह विशेषता <progress> तत्व लेबल (यदि कोई हो) की सूची लौटाती है |
टिप्पणियों
10 से कम इंटरनेट एक्सप्लोरर के संस्करणों में <progress> तत्व समर्थित नहीं है
कार्य प्रगति के बजाय <progress> तत्व किसी ऐसी चीज़ के लिए उपयोग किया जाने वाला गलत तत्व है जो सिर्फ एक गेज है। उदाहरण के लिए, <progress> तत्व का उपयोग करके डिस्क स्थान का उपयोग अनुचित है। इसके बजाय, इस प्रकार के उपयोग मामलों के लिए <meter> तत्व उपलब्ध है।
प्रगति
HTML5 में <progress> तत्व नया है और किसी कार्य की प्रगति का प्रतिनिधित्व करने के लिए उपयोग किया जाता है
<progress value="22" max="100"></progress>
यह 22% से भरा बार बनाता है
प्रगति पट्टी का रंग बदलना
प्रगति सलाखों को progress[value] चयनकर्ता के साथ स्टाइल किया जा सकता है।
यह उदाहरण प्रगति पट्टी को 250px चौड़ाई और 20px ऊँचाई देता है
progress[value] {
width: 250px;
height: 20px;
}
प्रगति सलाखों को विशेष रूप से स्टाइल करना मुश्किल हो सकता है।
क्रोम / सफारी / ओपेरा
ये ब्राउज़र प्रगति टैग को स्टाइल करने के लिए -webkit-appearance चयनकर्ता का उपयोग करते हैं। इसे ओवरराइड करने के लिए, हम उपस्थिति को रीसेट कर सकते हैं।
progress[value] {
-webkit-appearance: none;
appearance: none;
}
अब, हम कंटेनर को स्टाइल कर सकते हैं
progress[value]::-webkit-progress-bar {
background-color: "green";
}
फ़ायरफ़ॉक्स
फ़ायरफ़ॉक्स प्रगति पट्टी को थोड़ा अलग ढंग से स्टाइल करता है। हमें इन शैलियों का उपयोग करना होगा
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
इंटरनेट एक्स्प्लोरर
Internet Explorer 10+ progress तत्व का समर्थन करता है। हालांकि, यह background-color संपत्ति का समर्थन नहीं करता है। आपको इसके बजाय रंग संपत्ति का उपयोग करने की आवश्यकता होगी।
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML फॉलबैक
उन ब्राउज़र के लिए जो progress तत्व का समर्थन नहीं करते हैं, आप इसे वर्कअराउंड के रूप में उपयोग कर सकते हैं।
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
प्रगति टैग का समर्थन करने वाले ब्राउज़रों को अंदर स्थित नेस्ट को अनदेखा कर देगा। लिगेसी ब्राउज़र जो प्रगति टैग की पहचान नहीं कर सकते हैं, इसके बजाय डिव को प्रस्तुत करेंगे।