HTML प्रोग्रेस टैग | HTML Progress Tag in Hindi

589

HTML <progress> टैग को किसी कार्य की प्रगति को प्रदर्शित करने के लिए उपयोग किया जाता है। यह वेब डेवलपर्स के लिए वेबसाइट पर प्रगति पट्टी (progress bar) बनाने के लिए एक आसान तरीका प्रदान करता है। यह ज्यादातर वेब पेज पर फाइल अपलोड होने की प्रगति को दिखाने के लिए उपयोग किया जाता है।

HTML Progress Tag, HTML5 में नया है, इसलिए आपको नए ब्राउज़र का उपयोग करना चाहिए।

Attributes of HTML Progress Tag

HTML <progress> टैग, वैश्विक (global) और घटना (event) attributes के साथ-साथ 2 विशिष्ट attributes का भी समर्थन करता है।

Tag Description
value यह परिभाषित करता है कि task ने कितना काम कर लिया है।
max यह परिभाषित करता है कि task को कुल कितना काम चाहिए।

नोट: Progress tag का उपयोग केवल एक कार्य की प्रगति का प्रतिनिधित्व करने के लिए किया जाना चाहिए, ना कि मापने (डिस्क गति उपयोग) के लिए। ऐसे काम के लिए, <meter> element का उपयोग किया जाता है।

HTML Progress Tag Example

एचटीएमएल प्रगति का उदाहरण attribute के बिना:

  1. <progress> </progress>

ट्राई करें

Output

आओ अब, value और max attributes के साथ प्रगति का उदाहरण देखें।

  1. Downloading progress:
  2. <progress value =?43? max = “100”> </progress>

ट्राई करें

Output

Downloading progress:

Styling Progress Bar

आप progress tag पर सी एस एस कोड लागू कर सकते हैं।

  1. progress {
  2.   width: 300px;
  3.   height: 30px;
  4. }

ट्राई करें

Output

progress { width: 300px; height: 30px; }

HTML Progress Tag with JavaScript

कार्य की प्रगति प्रदर्शित करने के लिए जावास्क्रिप्ट के साथ <progress> टैग का उपयोग किया जाना चाहिए।

  1. <script>
  2. var gvalue=1;
  3. function abc(){
  4.  var progressExample = document.getElementById (‘progress-javascript-example’);
  5.      setInterval (function ()
  6.     {
  7.                  if(gvalue<100){
  8.                     gvalue++;
  9.                     progressExample.value =gvalue;
  10.                   }
  11.                  abc();
  12.       }, 1000);
  13. }
  14. </script>
  15. <progress id=“progress-javascript-example” min=“1” max=“100”></progress>
  16. <br/><br/>
  17. <button onclick=“abc()”>click me</button>

ट्राई करें

Output

Supporting Browsers

Element chrome  Chrome ie  IE firefox  Firefox opera  Opera safari  Safari
<progress> Yes Yes Yes Yes Yes