HTML प्रोग्रेस और मीटर

कुछ numbers तभी समझ आते हैं जब आप उन्हें visually देख सकें। '43% uploaded' वाली file को plain text की बजाय भरती हुई bar के रूप में समझना कहीं आसान है, और कम charge वाली battery को छोटे colored gauge के रूप में दिखाने पर तुरंत पहचानी जा सकती है। HTML इन्हीं situations के लिए दो built-in elements देता है। <progress> element दिखाता है कि कोई task completion की ओर कितना आगे बढ़ चुका है, जैसे कोई download या multi-step form। <meter> element किसी known range के अंदर एक value दिखाता है, जैसे disk usage या rating score। दोनों elements browser द्वारा natively render किए जाते हैं, यानी आपको बिना खुद कोई custom drawing code लिखे एक working visual gauge मिल जाता है।

In this page:

<progress> एलिमेंट
प्रोग्रेस को स्टाइल और डायनामिक रूप से अपडेट करना
<meter> एलिमेंट
मीटर रेंजेस: Low, High, और Optimum
Progress बनाम Meter: कब क्या इस्तेमाल करें

Syntax

markup

<progress value="current" max="total"></progress>
<meter value="current" min="min" max="max"></meter>

<progress> एलिमेंट

<progress> element एक bar दिखाता है जो यह दिखाने के लिए भरता जाता है कि किसी task का कितना हिस्सा पूरा हो चुका है। यह current amount के लिए एक value attribute और total amount needed के लिए एक max attribute लेता है।

Note:

जब task की duration पता न हो तो एक indeterminate, animated progress bar दिखाने के लिए value attribute पूरी तरह छोड़ दें।
Accepted attributes:
value — number between 0 and max
max — number greater than 0 (default 1)
Omit value for an indeterminate bar

Warning: max attribute के बिना, browser maximum 1 मान लेता है, जिससे अगर आप गलती से कोई बड़ा value पास कर दें तो लगभग पूरी भरी bar दिख सकती है।

उदाहरण: The <progress> Element

markup

<progress value="70" max="100"></progress>

प्रोग्रेस को स्टाइल और डायनामिक रूप से अपडेट करना

<progress> element को CSS से restyle किया जा सकता है और इसकी value को JavaScript से कभी भी बदला जा सकता है, जिससे आप bar को file upload या किसी multi-step wizard जैसे किसी असली task से सीधे जोड़ सकते हैं।

Note: value attribute को धीरे-धीरे update करें, सीधे 100 पर जंप न करें, ताकि visitors को animation smooth महसूस हो।

Warning: अलग-अलग browsers में progress bars को style करना inconsistent हो सकता है, क्योंकि हर browser default track और fill को अपने internal elements से render करता है।

उदाहरण: Styling and Updating Progress Dynamically

markup

<progress id="bar" value="30" max="100"></progress>
<script>
  document.getElementById('bar').value = 60;
</script>

<meter> एलिमेंट

<meter> element किसी known, fixed-range value, जैसे used disk space या survey rating, के लिए एक gauge दिखाता है। <progress> के विपरीत, यह ongoing task completion की बजाय measurements के लिए है।

Note:

एक defined minimum और maximum वाली किसी भी value के लिए <meter> इस्तेमाल करें, भले ही वह value कभी न बदले।
Accepted attributes:
value — current number
min — lower bound (default 0)
max — upper bound (default 1)
low — upper limit of the low range
high — lower limit of the high range
optimum — the best value

Warning: file upload जैसे open-ended task के लिए <meter> इस्तेमाल न करें, क्योंकि यह bounded measurements के लिए बना है, किसी unknown finish की ओर progress के लिए नहीं।

उदाहरण: The <meter> Element

markup

<meter value="0.6" min="0" max="1">60%</meter>

मीटर रेंजेस: Low, High, और Optimum

<meter> element low, high, और optimum attributes accept करता है, जिनसे browser यह तय कर पाता है कि gauge को अलग-अलग color में दिखाना है या नहीं, इस आधार पर कि current value good, acceptable, या poor range में आती है।

Note:

optimum को range के उस छोर के पास सेट करें जो सबसे अच्छे outcome को represent करता है, ताकि browsers gauge को meaningful तरीके से color कर सकें।
Accepted attributes:
low — upper limit of the low range
high — lower limit of the high range
optimum — the ideal value
min <= low <= high <= max

Warning: low, high, और optimum छोड़ देने का मतलब है कि हर value एक जैसे neutral color में render होगी, यहाँ तक कि वे values भी जो कोई समस्या दर्शाती हैं।

उदाहरण: Meter Ranges: Low, High, and Optimum

markup

<meter value="80" min="0" max="100" low="33" high="66" optimum="100"></meter>

Progress बनाम Meter: कब क्या इस्तेमाल करें

<progress> और <meter> के बीच चुनाव इस बात पर निर्भर करता है कि value क्या represent करती है: completion की ओर बढ़ रहे किसी task के लिए <progress> इस्तेमाल करें, और किसी known range के अंदर एक static measurement के लिए <meter>।

Note: यह पूछें कि क्या value आखिरकार 100% तक पहुँचकर गायब या reset हो जाएगी; अगर हाँ, तो यह progress है, नहीं तो यह एक meter reading है।

Warning: दोनों elements को मिलाने से assistive technology confuse हो सकती है, क्योंकि screen readers के लिए हर एक की अलग expected semantics होती हैं।

उदाहरण: Progress vs Meter: When to Use Each

markup

<progress value="50" max="100"></progress>
<meter value="7" min="0" max="10"></meter>

Live Example

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Icon Fonts Next Lesson → HTML Output Element

HTML प्रोग्रेस और मीटर

<progress> एलिमेंट

प्रोग्रेस को स्टाइल और डायनामिक रूप से अपडेट करना

<meter> एलिमेंट

मीटर रेंजेस: Low, High, और Optimum

Progress बनाम Meter: कब क्या इस्तेमाल करें

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code