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

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

एडम आर्गील

इस पोस्ट में, हम आपको बताना चाहते हैं कि <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 का स्क्रीनशॉट, जिसमें सिर्फ़ स्क्रीन के लिए तैयार एलिमेंट दिख रहा है.

लोड होने की प्रोग्रेस से प्रभावित इलाका

अगर आपकी नज़र अच्छी है, तो इससे जुड़े एलिमेंट और पेज के हिस्सों के साथ प्रोग्रेस दिखाने वाले इंडिकेटर को जोड़ना आसान हो सकता है. हालांकि, दृष्टि बाधित उपयोगकर्ताओं के लिए, यह समझना आसान नहीं होता. इसे बेहतर बनाने के लिए, 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> एलिमेंट के उन हिस्सों को चुनें जिन्हें हर ब्राउज़र दिखाता है. प्रोग्रेस एलिमेंट का इस्तेमाल करने में सिर्फ़ एक टैग लगता है, लेकिन यह कुछ चाइल्ड एलिमेंट से बना होता है. इन्हें सीएसएस के गलत सिलेक्टर की मदद से दिखाया जाता है. अगर आप इस सेटिंग को चालू करते हैं, तो Chrome DevTools आपको ये एलिमेंट दिखाएगा:

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

DevTools में उस जगह का स्क्रीनशॉट, जहां उपयोगकर्ता एजेंट के शैडो डीओएम को दिखाने की सुविधा चालू की गई है.

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

WebKit पर आधारित ब्राउज़र, जैसे कि Safari और Chromium ::-webkit-progress-bar और ::-webkit-progress-value को दिखाते हैं, जो सीएसएस के सबसेट को इस्तेमाल करने की अनुमति देते हैं. फ़िलहाल, पहले बनाई गई कस्टम प्रॉपर्टी का इस्तेमाल करके, 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> एलिमेंट पर सूडो एलिमेंट बनाने की अनुमति नहीं देता या प्रोग्रेस बार पर ऐनिमेट नहीं करने देता. स्यूडो-एलिमेंट के मुकाबले, ज़्यादातर ब्राउज़र में ट्रैक को ऐनिमेट करने की सुविधा होती है. इसलिए, pseudo-एलिमेंट को बेस के तौर पर और ऐनिमेट किए गए बार में अपग्रेड किया जाता है.

Chromium का pseudo-एलिमेंट

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 के लिए कस्टम प्रॉपर्टी और ऐनिमेशन, pseudo-element प्रोग्रेस बार पर लागू किए जाते हैं:

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

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

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 + "%"
}

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

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

  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> एलिमेंट की बदली हुई स्टाइल की सीमाओं के बिना, इसे बनाने की कोशिश की जा सकती है. यह एक्सप्लोर करने लायक है!

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

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

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