Adding progress indicators with w3-progress in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में w3-progress नाम की एक बिल्ट-इन रेडीमेड क्लास पहले से डिफाइन है, जिसे वेब डेवलपर अपने किसी वेबपेज वेबसाइट प्रोजेक्ट में इजीली एक प्रोग्रेस बार के रूप में ऐड या डिस्प्ले कर सकते हैं। वेबसाइट वेबपेज में इन कस्टम प्रोग्रेस बार क्लास का यूज़ किसी टास्क या प्रोसेस जैसे ( डेडिकेटेड सर्वर पर फ़ाइल अपलोड, ऑनलाइन फ़ॉर्म डाटा सबमिशन, सॉफ्टवेयर इंस्टलेशन, 0 टू 100 काउंटर, या कोई भी लंबे समय तक चलने वाला कोई भी सिस्टम डिफाइन ऑनलाइन या ऑफलाइन टास्क की करंट प्रोग्रेस को विज़ुअली रिप्रेजेंट या डिस्प्ले करने में किया जा सकता है।
Basic progress bar concept in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में प्रोग्रेस बार क्रिएट करने का सबसे इजी मेथड या कांसेप्ट है, किसी वेबपेज वेबसाइट में प्रोग्रेस बार इन्सर्ट या डिस्प्ले करने के लिए एक फिक्स साइज विड्थ के साथ w3-progress क्लास का यूज़ कर इसे डिस्प्ले कर सकते है।
Example of a basic progress bar in W3.CSS web development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Progress Bar Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Basic Structure of Progress Bar</h2>
<div class=”w3-progress-container w3-pink”>
<div class=”w3-progressbar w3-indigo” style=”width:30%”>30%</div>
</div>
</body>
</html>
Explanation of a basic progress bar in W3.CSS web development.
- w3-progress-container – यहाँ इस एक्साम्प्ल में यह प्रोग्रेस बार के लिए एक एक्सटर्नल कंटेनर साइज है। यहाँ प्रोग्रेस बार में एक न्यूट्रल बैकग्राउंड कलर प्रोवाइड करने के लिए w3-pink कलर क्लास से इसे स्टाइल या डेकोरेट किया गया है।
- w3-progressbar – यह मौजूदा वेबपेज में रियल प्रोग्रेस बार एलिमेंट क्लास है। style=”width:30%” एट्रिब्यूट मौजूदा प्रोग्रेस बार को 30% परसेंट पर सेट कर डिस्प्ले करता है। अपने मौजूदा वेबपेज में रियल टाइम प्रोग्रेस बार डिस्प्ले करने के लिए परसेंटेज को 0% और 100% के बीच किसी भी वैल्यू में मैन्युअल चेंज कर सकते हैं।
- Color class – मौजूदा वेबपेज में प्रोग्रेस बार में कलर को डिस्प्ले करने के लिए w3-indigo कलर का यूज़ किया जाता है। वेब डेवलपर मौजूदा वेबपेज में प्रोग्रेस बार अपीयरेंस को मॉडिफाई करने के लिए w3-lime, w3-pink, w3-yellow, w3-indigo, आदि जैसे अन्य प्रोग्रेस बार कलर क्लास को अप्लाई कर सकते हैं।
Using multiple progress bars in W3.CSS web development.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर एक ही वेबपेज वेबसाइट पेज पर अलग-अलग मल्टीप्ल टास्क के लिए एक साथ कई प्रोग्रेस बार क्रिएट कर डिस्प्ले कर सकते हैं. w3-progress बार क्लास के यूज़ से हम अलग अलग परसेंट के साथ एक से अधिक प्रोग्रेस बार को मैन्युअली डिस्प्ले कर सकते है।
Example of using multiple progress bars in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Multiple Progress Bars in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Let’s Try Multiple Progress Bars In Webpage</h2>
<div class=”w3-progress-container w3-light-blue”>
<div class=”w3-progressbar w3-yellow” style=”width:37%”>37% </div>
</div>
<div class=”w3-progress-container w3-light-grey”>
<div class=”w3-progressbar w3-brown” style=”width:70%”>70%</div>
</div>
<div class=”w3-progress-container w3-light-grey”>
<div class=”w3-progressbar w3-indigo” style=”width:94%”>94%</div>
</div>
<div class=”w3-progress-container w3-red”>
<div class=”w3-progressbar w3-green” style=”width:50%”>50%</div>
</div>
</body>
</html>
Explanation of using multiple progress bars in W3.CSS.
- यहाँ इस एक्साम्प्ल में हम चार अलग अलग मल्टीप्ल प्रोग्रेस बार कलर को डिस्प्ले करते है. यहाँ हम हर प्रोग्रेस बार को अलग-अलग कलर क्लासेज (w3-yellow, w3-brown, w3-indigo, w3-green) के साथ और अलग-अलग प्रोग्रेस बार परसेंट वैल्यू जिसमे (37%, 70%, 94%, और 50%) के साथ टास्क कम्पलीशन या प्रोग्रेस वैल्यू को डिस्प्ले कर सकते है।
- W3.CSS वेब डेवलपर अलग-अलग वेबपज वेबसाइट टास्क के लिए अलग-अलग लेवल पर वेबपेज टास्क कम्पलीट होने के ग्राफिकल प्रोसेस को रिप्रेजेंट करने के लिए हर प्रोग्रेस बार की विड्थ को अलग-अलग परसेंट साइज के साथ एडजस्ट कर सकते हैं।
