प्रोग्रेस दिखाने वाली रिंग

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

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

• नेटिव <progress> एलिमेंट को सिमैंटिक फ़ाउंडेशन के तौर पर इस्तेमाल करना, ताकि यह पक्का किया जा सके कि कॉम्पोनेंट को स्क्रीन रीडर और कीबोर्ड इस्तेमाल करने वाले लोग आसानी से ऐक्सेस कर सकें.
• conic-gradient() और mask-image का इस्तेमाल करके कॉम्पोनेंट को स्टाइल किया जा सकता है. इससे, एसवीजी पाथ में बदलाव करने की जटिलता के बिना, पूरी तरह से रिस्पॉन्सिव और थीम के हिसाब से रिंग बनाई जा सकती है.
• सीएसएस कस्टम प्रॉपर्टी और @property का इस्तेमाल करके, प्रोग्रेस बार के भरने के ट्रांज़िशन को जीपीयू की मदद से तेज़ और आसान बनाया जा सकता है.

इस तरीके को सिर्फ़ SVG वाले समाधानों के मुकाबले ज़्यादा प्राथमिकता दी जाती है. इसकी वजह यह है कि इसमें ARIA के बजाय सिमैंटिक <progress> एलिमेंट का इस्तेमाल किया जाता है. साथ ही, यह मौजूदा लेआउट, डिज़ाइन सिस्टम, और टाइपोग्राफ़ी के साथ आसानी से इंटिग्रेट हो जाता है.

लोड होने की स्थिति के बारे में जानकारी न होने पर, लोडिंग स्पिनर देखें.

लागू करना

1. मार्कअप

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

<div class="ring-wrapper">
  <progress value="75" max="100" aria-label="Task progress" class="progress-ring"></progress>
  <!-- Optional: Content to display in the center -->
  <div class="ring-content">
    75%
  </div>
</div>

2. स्टाइल

नेटिव यूज़र इंटरफ़ेस (यूआई) को छिपाना

<progress> एलिमेंट को प्रोग्रेस दिखाने वाली रिंग के तौर पर स्टाइल करने के लिए, सबसे पहले प्रोग्रेस बार के लिए डिफ़ॉल्ट ब्राउज़र स्टाइल को छिपाएं.

/* Hide native bars */
progress.loading-spinner:indeterminate::-webkit-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-webkit-progress-value {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::-moz-progress-bar {
  display: none;
  background: none;
}
progress.loading-spinner:indeterminate::slider-fill {
  display: none;
  background: none;
}

कंटेनर और रिंग

रैपर, पोज़िशनिंग कॉन्टेक्स्ट उपलब्ध कराता है. <progress> एलिमेंट, विज़ुअल ग्रेडिएंट को मैनेज करता है.

.progress-ring-wrapper {
  position: relative;
  display: grid;
  place-items: center;
}

progress.progress-ring {
  --size: 150px;
  --thickness: 16px;
  --track-color: #f1f5f9;
  --fill-color: #3b82f6;
  --value: attr(value type(<number>));
  width: var(--size);
  height: var(--size);

  transition: --value 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;

  background: conic-gradient(
    var(--fill-color) calc(var(--value) * 1%),
    var(--track-color) 0
  );

  /* MANDATORY: Clip the background to the border-area. */
  background-clip: border-area;
  border: var(--thickness) solid transparent;
  background-origin: border-box;
}

.progress-ring-content {
  /* Positioned in the center of the wrapper */
  position: absolute;
}

radial-gradient का इस्तेमाल करके, गोल एंड कैप भी बनाए जा सकते हैं.

@property की मदद से, ट्रांज़िशन को बेहतर बनाएं

वैल्यू बदलने पर प्रोग्रेस दिखाने वाली रिंग को आसानी से ऐनिमेट करने के लिए, --value को संख्या वाली कस्टम प्रॉपर्टी के तौर पर रजिस्टर करें.

जिन उपयोगकर्ताओं को मोशन सेंसिटिविटी की समस्या है उन्हें वैल्यू के बीच ट्रांज़िशन से परेशानी हो सकती है. prefers-reduced-motion मीडिया क्वेरी का पालन करें. इसके लिए, डिफ़ॉल्ट रूप से 0 सेकंड (तुरंत) की अवधि सेट करें. साथ ही, उन उपयोगकर्ताओं के लिए ज़्यादा समय सेट करें जिन्होंने कोई प्राथमिकता नहीं चुनी है.

@property --value {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

progress.progress-ring {
  transition: --value 0s ease-in-out;
  @media (prefers-reduced-motion: no-preference) {
    transition-duration: 0.4s;
  }
}

3. प्रोग्रेस के बारे में अपडेट

जब भी वैल्यू बदले, तब <progress> एलिमेंट पर value एट्रिब्यूट और .progress-ring-content के टेक्स्ट कॉन्टेंट को अपडेट करें. ऐसा तब करें, जब प्रतिशत दिखाया जा रहा हो.

4. सफलता की स्थिति (ज़रूरी नहीं)

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

/* Change the fill color to green when the progress reaches 100% */
progress.progress-ring[value="100"] {
  --fill-color: #10b981;
}

फ़ॉलबैक रणनीतियां

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

ऐनिमेशन फ़ॉलबैक

अगर @property काम नहीं करता है, तो रिंग आसानी से ट्रांज़िशन करने के बजाय, तुरंत नई वैल्यू पर पहुंच जाएगी. ज़्यादातर मामलों में यह ठीक है और इससे कोई फ़ंक्शनैलिटी नहीं टूटती.

अगर ट्रांज़िशन करना ज़रूरी है, तो देखें कि @property काम करता है या नहीं. साथ ही, पुराने ब्राउज़र में --value को इंटरपोलेट करने के लिए, requestAnimationFrame() लूप का इस्तेमाल करें.

ऐसे ब्राउज़र जो अब तक background-clip: border-area के साथ काम नहीं करते, उनके लिए mask-image का इस्तेमाल करें, ताकि <progress> एलिमेंट के बीच के हिस्से को खाली किया जा सके.

@supports not (background-clip: border-area) {
  mask-image: radial-gradient(
    transparent calc(50% - var(--thickness)),
    black calc(50% - var(--thickness) + 0.5px)
  );
  border: 0;
}

ऐसे ब्राउज़र जो किसी भी प्रॉपर्टी के लिए attr() सीएसएस फ़ंक्शन के साथ काम नहीं करते उनके लिए, MutationObserver का इस्तेमाल करें. इससे value एट्रिब्यूट, --value कस्टम प्रॉपर्टी के साथ अपने-आप सिंक हो जाएगा.

if (!CSS.supports("width: attr(value type(<number>))")) {
  const observer = new MutationObserver(() => {
    progress.style.setProperty("--value", progress.getAttribute("value"));
  });
  observer.observe(progress, {
    attributes: true,
    attributeFilter: ["value"],
  });
}