CSS लोडर एनिमेशन

आपके spinner को शक्ति देने वाले CSS एनिमेशन का संक्षिप्त इतिहास

@keyframes नियम और animation शॉर्टहैंड जो यह जनरेटर उत्सर्जित करता है, CSS Animations Module Level 1 में परिभाषित हैं। पहला W3C वर्किंग ड्राफ्ट 20 मार्च 2009 को प्रकाशित हुआ था और स्पेक अंततः नौ साल बाद 11 दिसंबर 2018 को W3C अनुशंसा तक पहुंच गया। तब तक, हर शिपिंग ब्राउज़र वर्षों से सिंटैक्स का समर्थन कर रहा था: Safari 4 (जून 2009) -webkit- उपसर्ग के साथ, Firefox 5 (जून 2011), Internet Explorer 10 (अक्टूबर 2012), और अप्रैल 2015 में Chrome 43 द्वारा बिना उपसर्ग। CSS Animations Module Level 2 वर्तमान वर्किंग ड्राफ्ट है और animation-timeline के माध्यम से स्क्रॉल-संचालित एनिमेशन जोड़ता है (Chrome 115, जुलाई 2023 में शिप; Safari और Firefox 2024 के अंत में फॉलो किए)। «spinner» प्रीसेट में रोटेशन CSS Transforms Module Level 1 से आता है, एक अलग स्पेक जो फरवरी 2019 से Candidate Recommendation पर है लेकिन सार्वभौमिक रूप से शिप किया गया: @keyframes ब्लॉक के अंदर 100% पर transform: rotate(360deg) रिंग को घुमाता है।

एक्सेसिबिलिटी वैकल्पिक नहीं है: «गति कम करें» प्राथमिकता

2014 से जारी प्रत्येक ऑपरेटिंग सिस्टम «गति कम करें» एक्सेसिबिलिटी सेटिंग शिप करता है, macOS «गति कम करें» (एक्सेसिबिलिटी → डिस्प्ले में), iOS «गति कम करें», Windows «एनिमेशन दिखाएं», Android «एनिमेशन हटाएं», GNOME «एनिमेशन सक्षम करें» बंद। prefers-reduced-motion मीडिया क्वेरी (नवंबर 2017 के W3C पहले सार्वजनिक वर्किंग ड्राफ्ट Media Queries Level 5 में परिभाषित) आपके CSS को इस प्राथमिकता का पता लगाने और spinner को रोकने देती है। हमेशा किसी भी spinner को इसमें लपेटें:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

WCAG 2.1 सफलता मानदंड 2.3.3 «इंटरैक्शन से एनिमेशन» (स्तर AAA, W3C अनुशंसा 5 जून 2018) को आवश्यक है कि इंटरैक्शन द्वारा शुरू किए गए किसी भी गति एनिमेशन को अक्षम किया जा सके, जब तक कि गति आवश्यक न हो। एक spinner शायद ही कभी आवश्यक होता है। WCAG 2.2 (अक्टूबर 2023) समान नियम विरासत में लेता है।

स्क्रीन रीडर के लिए, spinner को <div role="status" aria-live="polite"> में लपेटें, जिसमें दृष्टिगत रूप से छिपा हुआ «लोड हो रहा है…» पाठ हो। जब लोडिंग पूर्ण हो जाए, सामग्री को बदलें; लाइव क्षेत्र सहायक तकनीक को बिना चिल्लाए «लोड किया गया» की घोषणा करता है। लोड करते समय कंटेनिंग क्षेत्र पर aria-busy="true" सेट करें और बाद में aria-busy="false"। यह पैटर्न W3C ARIA Authoring Practices Guide लाइव-क्षेत्र अध्याय में दस्तावेज़ित है।

CSS spinners 60 fps पर क्यों सुचारू रहते हैं

आधुनिक ब्राउज़र रेंडरिंग पाइपलाइनों में तीन चरण हैं: लेआउट (स्थितियों की गणना), पेंट (पिक्सेल भरना), और कंपोजिट (GPU पर परतों को संयोजित करना)। transform और opacity गुण ही दो हैं जो लेआउट और पेंट दोनों को छोड़ देते हैं और विशुद्ध रूप से कंपोजिटर थ्रेड पर चलते हैं। उन्हें एनिमेट करना किसी भी फ्रेमरेट पर मूल रूप से मुफ्त है। width, height, top, left, margin, या कुछ भी जो बॉक्स मॉडल को बदलता है, को एनिमेट करना हर फ्रेम पर एक पूर्ण लेआउट-और-पेंट पास को मजबूर करता है और लो-एंड डिवाइस पर जल्दी से 60 fps से नीचे गिर जाता है। इस जनरेटर में हर प्रीसेट इसी कारण से केवल transform और opacity को एनिमेट करता है। यदि आपको ब्राउज़र को संकेत देने की आवश्यकता है, तो will-change: transform (CSS Will Change Module Level 1, W3C Candidate Recommendation 26 अप्रैल 2022 में परिभाषित) तत्व को अपनी कंपोजिटर परत में बढ़ावा देता है; कम उपयोग करें क्योंकि प्रत्येक परत GPU मेमोरी की लागत लेती है।

कब एक spinner सही जवाब है, और कब नहीं

Response Times: The 3 Important Limits (1993, 2014 में पुनःकहा) में, Nielsen Norman Group के Jakob Nielsen ने तीन धारणा सीमाओं को परिभाषित किया: 0.1 सेकंड «तत्काल» है, 1 सेकंड अबाधित विचार के प्रवाह की सीमा है, 10 सेकंड उपयोगकर्ता का ध्यान बनाए रखने की सीमा है। अपनी loader रणनीति को इनके साथ मैप करें:

• 1 सेकंड से कम: कोई संकेतक नहीं। एक spinner जो 300 ms के लिए चमकता है, कोई spinner के बजाय बदतर है: आंख चमक को एक गड़बड़ के रूप में दर्ज करती है।
• 1 से 5 सेकंड: एक अनिश्चित spinner या एक barber-pole शैली बार। उपयोगकर्ता को बताता है कि «कुछ हो रहा है» बिना अवधि के लिए प्रतिबद्ध हुए।
• 5 से 10 सेकंड: एक प्रतिशत के साथ एक निर्धारित <progress max="100" value="42">। उपयोगकर्ता एक लंबे इंतजार को बेहतर सहन करते हैं जब वे प्रगति देख सकते हैं।
• SPA रूट नेविगेशन: एक कंकाल स्क्रीन (अंतिम लेआउट की नकल करने वाले ग्रे प्लेसहोल्डर बॉक्स) एक spinner से तेज़ महसूस होती है। Luke Wroblewski ने मार्च 2013 की पोस्ट Mobile First Patterns में शब्द बनाया; Facebook का «shimmer» (2014) और Google का Material 2 (मई 2018) ने इसे मुख्यधारा बनाया।

Easing फ़ंक्शन और हर एक कैसा महसूस होता है

animation-timing-function गुण (और CSS Easing Functions Module Level 1, Candidate Recommendation 6 दिसंबर 2022) कीफ्रेम के बीच मान कैसे आगे बढ़ता है यह चुनता है:

• linear, स्थिर दर। एक निरंतर spinner के लिए सही; अंतिम स्थिति में धीमी होने वाली किसी भी चीज़ के लिए गलत।
• ease, ease-in, ease-out, ease-in-out, सामान्य क्यूबिक बेज़ियर वक्रों के लिए कीवर्ड उपनाम। ब्राउज़र डिफ़ॉल्ट ease है।
• cubic-bezier(x1, y1, x2, y2), [0, 1] में चार फ्लोट्स के साथ कस्टम वक्र। cubic-bezier(.25, .1, .25, 1) मानक «ease» वक्र है। «ओवरशूट» बाउंस प्रभाव के लिए cubic-bezier(.68, -.55, .27, 1.55) आज़माएं।
• steps(n, jump-end), असतत छलांगें, एक डॉट लोडर के लिए आदर्श जो बिना इंटरपोलेट किए स्थिति स्वैप करता है।

सामान्य गलतियाँ

• prefers-reduced-motion के बिना एक spinner शिप करना। वेस्टिबुलर विकार, माइग्रेन ट्रिगर, या ध्यान संवेदनशीलता वाले उपयोगकर्ता वेब पर हर घूमने वाले रिंग से प्रभावित होते हैं। फिक्स CSS की दो लाइनें है।
• role="status" और दृष्टिगत रूप से छिपा हुआ पाठ भूलना। एक spinner जो केवल दृष्टिगत रूप से घूमता है, स्क्रीन-रीडर उपयोगकर्ता को कुछ नहीं बताता।
• 0.5 सेकंड प्रति चक्र से कम एनिमेशन गति। एक spinner जो 0.3 s में पूरा होता है, उन्मादी महसूस होता है और कई उपयोगकर्ताओं के लिए «त्रुटि» के रूप में पढ़ा जाता है। प्रति चक्र 1 से 1.5 s आरामदायक रेंज है।
• लेआउट गुणों को एनिमेट करना। width, margin, या top को एनिमेट करने से लेआउट थ्रैश होता है। transform और opacity पर बने रहें।
• हर ऑपरेशन के लिए एक spinner दिखाना। यदि डेटा 100 ms के भीतर आता है, तो spinner चमकता है और गड़बड़ के रूप में पढ़ा जाता है। एक setTimeout के साथ spinner को 200 से 300 ms विलंबित करें जिसे आप सफलता पर साफ़ करते हैं।
• spinner को केंद्र में रखना भूलना। एक `.spinner` एक खंड के ऊपरी-बाएँ कोने में तैर रहा है क्योंकि इसका कंटेनर flex/grid कंटेनर नहीं है, दूसरा सबसे आम दृश्य बग है।

अधिक अक्सर पूछे जाने वाले प्रश्न

क्या ये spinners पुराने ब्राउज़र में काम करेंगे?

सभी आधुनिक ब्राउज़र (Chrome 43+, Firefox 16+, Safari 9+, Edge 12+) किसी भी उपसर्ग के बिना @keyframes और transform का समर्थन करते हैं। Internet Explorer 10 और 11 कुछ स्थानों पर -ms- उपसर्ग की आवश्यकता होती है लेकिन अन्यथा काम करते हैं। IE 9 और निम्न में कोई CSS एनिमेशन समर्थन नहीं है: एक एनिमेटेड GIF पर वापस गिरें, या फीचर-डिटेक्ट के लिए @supports (animation: spin 1s) का उपयोग करें।

जब सामग्री लोड हो जाती है तो मैं spinner को कैसे रोकूँ?

या तो DOM से तत्व को हटा दें, display: none या hidden विशेषता के साथ इसे छिपाएं, या animation-play-state: paused के साथ एनिमेशन को रोकें। यदि आप इसे फिर से दिखा सकते हैं तो रोकना सबसे सस्ता है। यदि आपने ARIA पैटर्न का उपयोग किया है, तो कंटेनर पर aria-busy="false" भी सेट करें और लोडिंग टेक्स्ट को लोडेड स्टेट घोषणा से बदलें।

क्या मैं picker की अनुमति से अधिक spinner रंगों को अनुकूलित कर सकता हूँ?

हाँ। आउटपुट CSS नियमित hex / rgb / hsl मानों का उपयोग करता है; उन्हें CSS चर (var(--brand-primary)) से बदलें ताकि spinner आपके डिज़ाइन सिस्टम का पालन करे। एक दोहरे-रंग के spinner के लिए, border-color शॉर्टहैंड संपादित करें: border-color: var(--brand) transparent transparent transparent क्लासिक «एक-चौथाई-आर्क» लुक देता है।

बस SVG या Lottie एनिमेशन क्यों नहीं उपयोग करें?

CSS spinners 200 बाइट्स से कम वजनी होते हैं, कोई अतिरिक्त अनुरोध की आवश्यकता नहीं होती, कोई JavaScript रनटाइम की आवश्यकता नहीं होती, और किसी भी बाहरी संसाधन लोड होने से पहले रेंडर होते हैं। SVG जटिल आकृतियों के लिए महान है; Lottie After Effects से डिज़ाइनर-लेखक एनिमेशन के लिए महान है। एक सामान्य «कुछ लोड हो रहा है» संकेतक के लिए, CSS सबसे सस्ता उपकरण है जो काम सही ढंग से करता है।

क्या कुछ ट्रैक किया जाता है या सर्वर पर भेजा जाता है?

नहीं। जनरेटर पूरी तरह से आपके ब्राउज़र के JavaScript में चलता है। आपके रंग चयन, आकार समायोजन, और कॉपी किया गया CSS कभी पेज नहीं छोड़ता। DevTools के नेटवर्क टैब में सत्यापित करें।