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

<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 पर सेट हो जाएगी. मैंने शून्य के अंदर रहना चुना और 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>

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

स्टाइल

स्टाइल के मामले में, प्रोग्रेस एलिमेंट को समझना थोड़ा मुश्किल होता है. बिल्ट-इन एचटीएमएल एलिमेंट में कुछ खास हिस्से छिपे होते हैं, जिन्हें चुनना मुश्किल होता है और अक्सर सेट की जाने वाली प्रॉपर्टी का सिर्फ़ सीमित सेट ऑफ़र करती है.

लेआउट

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

<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. Elements शीर्षक में, उपयोगकर्ता एजेंट की शैडो दिखाएं और चालू करें DOM चेकबॉक्स होता है.

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

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

Safari और Chromium जैसे WebKit-आधारित ब्राउज़र ::-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 सिर्फ़ ::-moz-progress-bar स्यूडो सिलेक्टर को <progress> एलिमेंट. इसका मतलब यह भी है कि हम ट्रैक को सीधे तौर पर रंग नहीं सकते. 

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

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

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

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

ऐनिमेशन

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

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

में से 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 स्थिति को ऐनिमेट किया जा रहा है

यहां मुझे थोड़ा और क्रिएटिव मिलेगा, ताकि मैं ऐनिमेशन उपलब्ध करा सकूं. नकली एलिमेंट को बनाया जाता है और एक ग्रेडिएंट लागू किया जाता है, जिसे वापस ऐनिमेट किया जाता है और सभी तीन ब्राउज़र के लिए.

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

कस्टम प्रॉपर्टी कई चीज़ों के लिए बेहतरीन होती हैं, लेकिन मेरी पसंदीदा प्रॉपर्टी में से एक है किसी दूसरी जादुई दिखने वाली सीएसएस वैल्यू को एक नाम देकर. आपको फ़ॉलो करना काफ़ी जटिल 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 Voice Over ऐप्लिकेशन का स्क्रीनशॉट लोडिंग बार में हुई प्रोग्रेस को पढ़ रहा है.

नतीजा

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

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

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

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

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