लोडिंग बार कॉम्पोनेंट बनाना

<progress> एलिमेंट की मदद से, ऐसे लोडिंग बार के बारे में खास जानकारी जिसमें रंगों के हिसाब से और आसानी से इस्तेमाल किए जा सकने वाले लोडिंग बार बनाए जा सकते हैं.

Adam Argyle

इस पोस्ट में, हम आपको बताना चाहते हैं कि <progress> एलिमेंट की मदद से, रंगों के हिसाब से और ऐक्सेस किए जा सकने वाले लोडिंग बार को कैसे बनाया जाए. डेमो देखें और सोर्स देखें!

Chrome पर हल्के और गहरे रंग वाले, अनिश्चित, बढ़ते, और पूरे होने वाले डेटा का डेमो दिया गया है.

अगर आपको वीडियो देखना है, तो इस पोस्ट का YouTube वर्शन यहां देखें:

खास जानकारी

<progress> एलिमेंट, उपयोगकर्ताओं को ट्रेनिंग पूरी होने के बारे में विज़ुअल और ऑडियो जैसी सुविधा देता है. यह विज़ुअल फ़ीडबैक इन मामलों में काम का होता है. जैसे: फ़ॉर्म में कितनी प्रोग्रेस हुई है, जानकारी डाउनलोड या अपलोड करते हुए दिखाना या यह दिखाना कि प्रोग्रेस की रकम पता नहीं है, लेकिन काम अब भी जारी है.

इस जीयूआई चैलेंज ने मौजूदा एचटीएमएल <progress> एलिमेंट के साथ काम किया, ताकि सुलभता में कुछ समय खर्च हो. रंग और लेआउट, बिल्ट-इन एलिमेंट को पसंद के मुताबिक बनाने की सीमा को बढ़ाते हैं. इससे कॉम्पोनेंट को आधुनिक बनाया जा सकता है और डिज़ाइन सिस्टम में बेहतर तरीके से फ़िट किया जा सकता है.

हर ब्राउज़र में मौजूद हल्के और गहरे रंग के टैब, जो अडैप्टिव आइकॉन की खास जानकारी को ऊपर से नीचे तक दिखाते हैं: Safari, Firefox, Chrome.
Firefox, Safari, iOS Safari, Chrome, और Android Chrome में हल्के और गहरे रंग वाली स्कीम का डेमो दिखाया गया है.

मार्कअप

मैंने <progress> एलिमेंट को <label> में रैप करने का विकल्प चुना, ताकि इंप्लिसिट रिलेशनशिप के लिए साफ़ तौर पर सेक्शुअल ऐक्ट दिखाने वाले एट्रिब्यूट को शामिल न किया जा सके. मैंने एक ऐसे पैरंट एलिमेंट को भी लेबल किया है जिस पर लोड होने की स्थिति का असर पड़ा है, ताकि स्क्रीन रीडर की टेक्नोलॉजी से वह जानकारी लोगों को वापस भेजी जा सके.

<progress></progress>

अगर कोई value नहीं है, तो एलिमेंट की प्रोग्रेस तय नहीं की जाती. max एट्रिब्यूट की वैल्यू डिफ़ॉल्ट तौर पर 1 होती है. इसलिए, प्रोग्रेस 0 और 1 के बीच होती है. उदाहरण के लिए, max को 100 पर सेट करने से, रेंज 0-100 पर सेट हो जाएगी. मैंने 0 और 1 की सीमा के अंदर जाना चुना और प्रोग्रेस की वैल्यू का 0.5 या 50% किया.

लेबल रैप किए गए प्रगति

इंप्लिसिट संबंध में, प्रोग्रेस एलिमेंट को इस तरह के लेबल से रैप किया जाता है:

<label>Loading progress<progress></progress></label>

अपने डेमो में, मैंने सिर्फ़ स्क्रीन रीडर के लिए लेबल शामिल करने का विकल्प चुना था. ऐसा करने के लिए, लेबल टेक्स्ट को <span> में रैप करें और उसमें कुछ स्टाइल लागू करें. इससे वह स्क्रीन के बाहर भी दिखेगा:

<label>
  <span class="sr-only">Loading progress</span>
  <progress></progress>
</label>

WebAIM के साथ जुड़े सीएसएस के साथ:

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

DevTools का स्क्रीनशॉट, जिसमें &#39;सिर्फ़ स्क्रीन के लिए तैयार&#39; एलिमेंट दिखाया गया है.

डेटा लोड होने की प्रोसेस के डेटा का असर, पेज के किसी हिस्से पर पड़ा है

अगर आपकी नज़र सही है, तो इससे जुड़े एलिमेंट और पेज एरिया के साथ प्रोग्रेस इंडिकेटर को जोड़ना आसान हो सकता है, लेकिन दृष्टि बाधित उपयोगकर्ताओं के लिए यह समझना आसान नहीं है. इसे बेहतर बनाने के लिए, सबसे ऊपर मौजूद एलिमेंट को aria-busy एट्रिब्यूट असाइन करें. लोड होने के बाद यह एलिमेंट बदल जाएगा. इसके अलावा, aria-describedby का इस्तेमाल करके, प्रोग्रेस और लोडिंग ज़ोन के बीच के संबंध को बताएं.

<main id="loading-zone" aria-busy="true">
  …
  <progress aria-describedby="loading-zone"></progress>
</main>

JavaScript से, टास्क की शुरुआत में aria-busy को true पर और पूरा हो जाने पर false पर टॉगल करें.

Aria एट्रिब्यूट जोड़ना

<progress> एलिमेंट का इंप्लिसिट रोल progressbar है, लेकिन मैंने इसे उन ब्राउज़र के लिए साफ़ तौर पर बता दिया है जिनमें इंप्लिसिट रोल नहीं होता. एलिमेंट को अज्ञात स्थिति में रखने के लिए, मैंने indeterminate एट्रिब्यूट भी जोड़ा है. यह एलिमेंट को देखने से ज़्यादा साफ़ है कि एलिमेंट में कोई value सेट नहीं है. 

<label>
  Loading 
  <progress 
    indeterminate 
    role="progressbar" 
    aria-describedby="loading-zone"
    tabindex="-1"
  >unknown</progress>
</label>

प्रोग्रेस एलिमेंट को JavaScript से फ़ोकस करने लायक बनाने के लिए, tabindex="-1" का इस्तेमाल करें. स्क्रीन रीडर टेक्नोलॉजी के लिए यह अहम है. ऐसा इसलिए है, क्योंकि प्रोसेस में बदलाव होने के साथ ही प्रोग्रेस पर फ़ोकस करने से उपयोगकर्ता को यह बताया जाता है कि अपडेट की गई प्रोग्रेस कितनी दूर तक पहुँच गई है.

स्टाइल

स्टाइल के मामले में, प्रोग्रेस एलिमेंट को समझना थोड़ा मुश्किल होता है. पहले से मौजूद एचटीएमएल एलिमेंट में कुछ ऐसे खास हिस्से होते हैं जिन्हें चुनना मुश्किल हो सकता है. साथ ही, अक्सर इनमें सेट की जाने वाली प्रॉपर्टी का सीमित सेट ही उपलब्ध होता है.

लेआउट

लेआउट स्टाइल की मदद से, प्रोग्रेस एलिमेंट के साइज़ और लेबल की स्थिति में कुछ बदलाव किया जा सकता है. पूरा होने की एक खास स्थिति जोड़ी जाती है, जो काम की हो सकती है, लेकिन ज़रूरी नहीं, इसके लिए एक अलग विज़ुअल क्यू का इस्तेमाल किया जाता है.

<progress> लेआउट

प्रोग्रेस एलिमेंट की चौड़ाई को पूरा नहीं किया जाता है, ताकि डिज़ाइन के लिए ज़रूरी जगह के हिसाब से यह सिकुड़कर बढ़ सके. appearance और border को none पर सेट करने पर, पहले से मौजूद स्टाइल हटा दिए जाते हैं. ऐसा इसलिए किया जाता है, ताकि सभी ब्राउज़र में एलिमेंट को नॉर्मलाइज़ किया जा सके, क्योंकि हर ब्राउज़र के एलिमेंट की अपनी स्टाइल होती है. 

progress {
  --_track-size: min(10px, 1ex);
  --_radius: 1e3px;

  /*  reset  */
  appearance: none;
  border: none;

  position: relative;
  height: var(--_track-size);
  border-radius: var(--_radius);
  overflow: hidden;
}

_radius के लिए 1e3px की वैल्यू, एक बड़ी संख्या दिखाने के लिए साइंटिफ़िक नंबर नोटेशन का इस्तेमाल करती है, ताकि border-radius हमेशा पूर्णांक में रहे. यह 1000px के बराबर है. मुझे इसका इस्तेमाल करना पसंद है क्योंकि मेरा लक्ष्य इतने बड़े मान का उपयोग करना है कि मैं इसे सेट कर सकूं और भूल जाऊं (और इसमें 1000px से कम लिखना भी आसान है). ज़रूरत पड़ने पर इसे और भी बड़ा करना भी आसान है: बस 3 को 4 में बदलें, फिर 1e4px 10000px के बराबर होगी.

overflow: hidden का इस्तेमाल किया जा रहा है और यह काफ़ी मज़ेदार रहा है. इससे कुछ चीज़ें आसान हो गईं, जैसे कि border-radius वैल्यू को ट्रैक पर पास करने और फ़िल एलिमेंट को ट्रैक करने की ज़रूरत नहीं. हालांकि, इसका मतलब यह भी था कि प्रोग्रेस के बारे में बताने वाला कोई भी चाइल्ड एलिमेंट एलिमेंट के बाहर नहीं रह पाएगा. इस कस्टम प्रोग्रेस एलिमेंट पर, overflow: hidden के बिना भी एक बार फिर किया जा सकता है. इससे ऐनिमेशन या पूरा होने की बेहतर स्थितियों के कुछ मौके मिल सकते हैं.

प्रोसेस पूर्ण

सीएसएस सिलेक्टर यहां ज़्यादा से ज़्यादा वैल्यू की तुलना करके मुश्किल काम करते हैं. अगर ये मैच होते हैं, तो प्रोग्रेस पूरी हो जाती है. पूरा होने पर, एक सूडो-एलिमेंट जनरेट होता है और उसे प्रोग्रेस एलिमेंट के आखिर में जोड़ दिया जाता है. इससे, पूरा होने के लिए एक अच्छा अतिरिक्त विज़ुअल संकेत मिलता है.

progress:not([max])[value="1"]::before,
progress[max="100"][value="100"]::before {
  content: "✓";
  
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  display: flex;
  align-items: center;
  padding-inline-end: max(calc(var(--_track-size) / 4), 3px);

  color: white;
  font-size: calc(var(--_track-size) / 1.25);
}

लोडिंग बार का 100% स्क्रीनशॉट और उसके आखिर में सही का निशान दिख रहा है.

रंग

ब्राउज़र, प्रोग्रेस एलिमेंट के लिए अपने अलग रंग दिखाता है. साथ ही, सिर्फ़ एक सीएसएस प्रॉपर्टी से, हल्के और गहरे रंग के रंगों में ढल जाता है. ब्राउज़र के लिए खास सिलेक्टर की मदद से, इसे बनाया जा सकता है.

हल्के और गहरे रंग वाले ब्राउज़र की स्टाइल

अपनी साइट को गहरे और हल्के रंग के अडैप्टिव <progress> एलिमेंट में ऑप्ट इन करने के लिए, बस color-scheme ज़रूरी है.

progress {
  color-scheme: light dark;
}

एक प्रॉपर्टी की प्रोग्रेस के लिए भरा गया रंग

<progress> एलिमेंट को टिंट करने के लिए, accent-color का इस्तेमाल करें.

progress {
  accent-color: rebeccapurple;
}

देखें कि accent-color के हिसाब से, ट्रैक के बैकग्राउंड का रंग हल्के से गहरे रंग में बदलता है. ब्राउज़र उचित कंट्रास्ट सुनिश्चित कर रहा है: बहुत व्यवस्थित.

पूरी तरह से पसंद के मुताबिक हल्के और गहरे रंग

<progress> एलिमेंट पर दो कस्टम प्रॉपर्टी सेट करें. एक प्रॉपर्टी ट्रैक के रंग के लिए और दूसरी, ट्रैक की प्रोग्रेस के रंग के लिए. prefers-color-scheme मीडिया क्वेरी में, ट्रैक और उसकी प्रोग्रेस के लिए कलर की नई वैल्यू दें.

progress {
  --_track: hsl(228 100% 90%);
  --_progress: hsl(228 100% 50%);
}

@media (prefers-color-scheme: dark) {
  progress {
    --_track: hsl(228 20% 30%);
    --_progress: hsl(228 100% 75%);
  }
}

फ़ोकस स्टाइल

पहले हमने एलिमेंट को एक नेगेटिव टैब इंडेक्स दिया था, ताकि उसे प्रोग्राम के हिसाब से फ़ोकस किया जा सके. फ़ोकस को अपनी पसंद के मुताबिक बनाने के लिए, :focus-visible का इस्तेमाल करें. इससे फ़ोकस रिंग स्टाइल को बेहतर बनाने में मदद मिलेगी. इससे, माउस से क्लिक करने और फ़ोकस करने पर फ़ोकस रिंग नहीं दिखेगी, लेकिन कीबोर्ड पर क्लिक करने से दिखेगा. YouTube वीडियो में, इसके बारे में विस्तार से बताया गया है और इसे समझना फ़ायदेमंद है.

progress:focus-visible {
  outline-color: var(--_progress);
  outline-offset: 5px;
}

लोडिंग बार का स्क्रीनशॉट, जिसके आस-पास फ़ोकस रिंग मौजूद है. सभी रंग एक जैसे हैं.

सभी ब्राउज़र पर पसंद के मुताबिक स्टाइल

<progress> एलिमेंट के वे हिस्से चुनकर स्टाइल को पसंद के मुताबिक बनाएं जो हर ब्राउज़र पर दिखते हैं. प्रोग्रेस एलिमेंट का इस्तेमाल एक टैग है, लेकिन यह कुछ ऐसे चाइल्ड एलिमेंट से बना होता है जो सीएसएस pseudo सिलेक्टर की मदद से, बिना अनुमति के दिखते हैं. अगर इस सेटिंग को चालू किया जाता है, तो Chrome DevTools आपको ये एलिमेंट दिखाएगा:

  1. DevTools देखने के लिए, अपने पेज पर राइट क्लिक करें और एलिमेंट की जांच करें चुनें.
  2. DevTools विंडो के सबसे ऊपर दाएं कोने में मौजूद, सेटिंग गियर पर क्लिक करें.
  3. एलिमेंट शीर्षक में, उपयोगकर्ता एजेंट का शैडो दिखाएं चेकबॉक्स ढूंढें और उसे चालू करें.

DevTools में शैडो DOM की जानकारी ज़ाहिर करने के लिए, DevTools में उसकी जगह का स्क्रीनशॉट.

Safari और Chromium की स्टाइल

Safari और Chromium जैसे WebKit-आधारित ब्राउज़र में ::-webkit-progress-bar और ::-webkit-progress-value दिखते हैं, जो CSS के सबसेट को इस्तेमाल करने की अनुमति देते हैं. फ़िलहाल, पहले बनाई गई कस्टम प्रॉपर्टी का इस्तेमाल करके background-color सेट करें. ये प्रॉपर्टी, रोशनी और अंधेरे के हिसाब से ढल जाती हैं.

/*  Safari/Chromium  */
progress[value]::-webkit-progress-bar {
  background-color: var(--_track);
}

progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
}

प्रोग्रेस एलिमेंट के अंदरूनी एलिमेंट दिखाने वाला स्क्रीनशॉट.

Firefox की स्टाइल

Firefox सिर्फ़ <progress> एलिमेंट पर ::-moz-progress-bar स्यूडो सिलेक्टर दिखाता है. इसका मतलब यह भी है कि हम ट्रैक को सीधे तौर पर रंग नहीं सकते. 

/*  Firefox  */
progress[value]::-moz-progress-bar {
  background-color: var(--_progress);
}

Firefox का स्क्रीनशॉट और प्रोग्रेस एलिमेंट के हिस्से कहां मिलेंगे.

डीबगिंग कॉर्नर का स्क्रीनशॉट, जहां Safari, iOS Safari, Firefox, Chrome, और Android पर Chrome में लोडिंग बार काम करता दिख रहा है.

ध्यान दें कि Firefox में accent-color से ट्रैक रंग सेट किया गया है जबकि iOS Safari में हल्का नीला ट्रैक है. गहरे रंग वाले मोड में भी ऐसा ही होता है: Firefox में गहरे रंग का ट्रैक होता है, लेकिन उसमें हमारे तय किए गए कस्टम रंग नहीं होते. साथ ही, यह Webkit पर आधारित ब्राउज़र में काम करता है.

Animation

ब्राउज़र में पहले से मौजूद स्यूडो सिलेक्टर के साथ काम करते समय, ऐसा अक्सर अनुमति वाली सीएसएस प्रॉपर्टी के सीमित सेट के साथ होता है.

ऐनिमेशन के ज़रिए ट्रैक भरा जा रहा है

प्रोग्रेस एलिमेंट के inline-size में ट्रांज़िशन जोड़ने की सुविधा, Chromium के लिए काम करती है, लेकिन Safari के लिए नहीं. Firefox इसके ::-moz-progress-bar पर भी ट्रांज़िशन प्रॉपर्टी का इस्तेमाल नहीं करता.

/*  Chromium Only 😢  */
progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
  transition: inline-size .25s ease-out;
}

:indeterminate स्थिति को ऐनिमेट किया जा रहा है

यहां मैं थोड़ा और क्रिएटिव हो जाऊंगा, ताकि मैं ऐनिमेशन दिखा सकूं. Chromium के लिए एक स्यूडो-एलिमेंट बनाया जाता है और एक ग्रेडिएंट लागू किया जाता है, जो तीनों ब्राउज़र के लिए आगे-पीछे ऐनिमेशन किया जाता है.

कस्टम प्रॉपर्टी

कस्टम प्रॉपर्टी कई चीज़ों के लिए बेहतरीन होती हैं, लेकिन मेरी पसंदीदा प्रॉपर्टी में से एक सीएसएस वैल्यू को जादुई रूप से नाम देना है. नीचे दिया गया नाम काफ़ी मुश्किल है linear-gradient, लेकिन उसका नाम अच्छा है. इसके मकसद और इस्तेमाल के उदाहरणों को साफ़ तौर पर समझा जा सकता है.

progress {
  --_indeterminate-track: linear-gradient(to right,
    var(--_track) 45%,
    var(--_progress) 0%,
    var(--_progress) 55%,
    var(--_track) 0%
  );
  --_indeterminate-track-size: 225% 100%;
  --_indeterminate-track-animation: progress-loading 2s infinite ease;
}

कस्टम प्रॉपर्टी से कोड को DRY में बने रहने में भी मदद मिलेगी, क्योंकि हम ब्राउज़र से जुड़े इन सिलेक्टर को एक साथ ग्रुप नहीं कर सकते.

कीफ़्रेम

इसका मकसद लगातार चलने वाला एक ऐनिमेशन है. स्टार्ट और एंड मुख्य-फ़्रेम, सीएसएस में सेट किए जाएंगे. ऐनिमेशन बनाने के लिए, सिर्फ़ एक मुख्य-फ़्रेम की ज़रूरत होती है, यानी 50% पर बीच वाला मुख्य-फ़्रेम. इसकी मदद से ऐनिमेशन बनाया जा सकता है, जहां से वह बार-बार शुरू हुआ था!

@keyframes progress-loading {
  50% {
    background-position: left; 
  }
}

हर ब्राउज़र को टारगेट किया जा रहा है

हर ब्राउज़र, <progress> एलिमेंट पर छद्म-एलिमेंट बनाने की अनुमति नहीं देता और न ही प्रोग्रेस बार को ऐनिमेट करने देता है. स्यूडो-एलिमेंट के बजाय, ज़्यादातर ब्राउज़र में ट्रैक को ऐनिमेट किया जा सकता है. इसलिए, मैं स्यूडो एलिमेंट को बेस के तौर पर और ऐनिमेटिंग बार के तौर पर अपग्रेड करता हूं.

Chromium का pseudo-element

Chromium, स्यूडो-एलिमेंट की अनुमति देता है: ::after का इस्तेमाल एलिमेंट को छिपाने के लिए पोज़िशन के साथ किया जाता है. अनिश्चित कस्टम प्रॉपर्टी का उपयोग किया जाता है और पीछे और पीछे वाले एनिमेशन बहुत अच्छी तरह से काम करता है.

progress:indeterminate::after {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
Safari प्रोग्रेस बार

Safari के लिए, कस्टम प्रॉपर्टी और एक ऐनिमेशन को स्यूडो-एलिमेंट प्रोग्रेस बार पर लागू किया जाता है:

progress:indeterminate::-webkit-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
Firefox का प्रोग्रेस बार

Firefox के लिए, कस्टम प्रॉपर्टी और एक ऐनिमेशन को स्यूडो-एलिमेंट प्रोग्रेस बार पर भी लागू किया जाता है:

progress:indeterminate::-moz-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}

JavaScript

<progress> एलिमेंट के साथ JavaScript की अहम भूमिका होती है. यह एलिमेंट को भेजी गई वैल्यू को कंट्रोल करता है. साथ ही, यह पक्का करता है कि दस्तावेज़ में स्क्रीन रीडर के लिए ज़रूरी जानकारी मौजूद हो.

const state = {
  val: null
}

डेमो में प्रोग्रेस को कंट्रोल करने के बटन होते हैं. वे state.val को अपडेट करते हैं. इसके बाद, DOM को अपडेट करने के लिए एक फ़ंक्शन को कॉल करते हैं.

document.querySelector('#complete').addEventListener('click', e => {
  state.val = 1
  setProgress()
})

setProgress()

इस फ़ंक्शन में यूज़र इंटरफ़ेस (यूआई)/UX मैनेज करता है. शुरू करने के लिए, setProgress() फ़ंक्शन बनाएं. किसी पैरामीटर की ज़रूरत नहीं है, क्योंकि इसके पास state ऑब्जेक्ट, प्रोग्रेस एलिमेंट, और <main> ज़ोन का ऐक्सेस है.

const setProgress = () => {
  
}

<main> ज़ोन पर लोड होने का स्टेटस सेट किया जा रहा है

प्रोग्रेस पूरी हुई है या नहीं, इसके हिसाब से मिलते-जुलते <main> एलिमेंट को aria-busy एट्रिब्यूट में अपडेट करना होगा:

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)
}

अगर लोड होने की रकम की जानकारी नहीं है, तो एट्रिब्यूट हटाएं

अगर वैल्यू की जानकारी नहीं है या इसे सेट नहीं किया गया है, तो null के इस इस्तेमाल में, value और aria-valuenow एट्रिब्यूट को हटा दें. इससे <progress> अनिश्चित हो जाएगा.

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }
}

JavaScript दशमलव की गणित से जुड़ी समस्याएं ठीक करना

मैंने डिफ़ॉल्ट तौर पर, सबसे ज़्यादा वैल्यू 1 पर ही बने रहने का विकल्प चुना है. इसलिए, डेमो इनक्रीमेंट और कम करने वाले फ़ंक्शन में दशमलव के बाद के हिसाब का इस्तेमाल किया जाता है. JavaScript और दूसरी भाषाएँ, इसके लिए हमेशा अच्छी नहीं होतीं. यहां एक roundDecimals() फ़ंक्शन दिया गया है, जो गणित के नतीजों में से बची हुई वैल्यू को कम कर देगा:

const roundDecimals = (val, places) =>
  +(Math.round(val + "e+" + places)  + "e-" + places)

वैल्यू को पूर्णांक में बदलें, ताकि उसे दिखाया जा सके और वह आसानी से पढ़ा जा सके:

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"
}

स्क्रीन रीडर और ब्राउज़र की स्थिति के लिए वैल्यू सेट करें

वैल्यू का इस्तेमाल, डीओएम में तीन जगहों पर किया जाता है:

  1. <progress> एलिमेंट का value एट्रिब्यूट.
  2. aria-valuenow एट्रिब्यूट.
  3. <progress> के अंदरूनी टेक्स्ट वाला कॉन्टेंट.
const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent
}

प्रोग्रेस पर फ़ोकस करना

वैल्यू अपडेट होने पर, देख सकने वाले उपयोगकर्ताओं को प्रोग्रेस में बदलाव दिखेगा, लेकिन स्क्रीन रीडर के उपयोगकर्ताओं को अभी तक इस बदलाव की सूचना नहीं दी गई है. <progress> एलिमेंट पर फ़ोकस करें और ब्राउज़र अपडेट की सूचना देगा!

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent

  progress.focus()
}

Mac OS वॉइस ओवर ऐप्लिकेशन का स्क्रीनशॉट, जिसमें उपयोगकर्ता को लोड होने के बार में हुई प्रोग्रेस के बारे में जानकारी दी गई है.

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो आप कैसे करेंगे ‽ 🙂

अगर दूसरा मौका दिया जाए, तो मैं ज़रूर कुछ बदलाव करना चाहूंगी. मुझे लगता है कि मौजूदा कॉम्पोनेंट को साफ़ करने के लिए जगह है. साथ ही, <progress> एलिमेंट की pseudo-class स्टाइल की सीमाओं के बिना, एक नया कॉम्पोनेंट बनाने की कोशिश की जा सकती है. इसे एक्सप्लोर करना फ़ायदेमंद होगा!

आइए, हम अलग-अलग तरह के काम करते हैं और वेब पर काम करने के सभी तरीके सीखते हैं.

एक डेमो बनाएं, मुझे ट्वीट करें लिंक, और नीचे दिए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दिया जाएगा!

कम्यूनिटी रीमिक्स