NProgress: YouTube और मीडियम पर प्रगति बार

कई लोगों ने देखा कि YouTube और मीडियम पर एक छोटा सा नया UI तत्व दिखाई दिया - पृष्ठ के शीर्ष पर एक पतली रंग पट्टी के रूप में एक प्रगति बार, जो ब्राउज़र पैनल के ठीक नीचे दबा हुआ था।

हाल ही में अमेरिकी न्यू यूआई पैटर्न: वेबसाइट लोडिंग बार्स ऑन यूजबिलिटीपोस्ट ने नए तत्व की ओर ध्यान आकर्षित किया है। जैसा कि यह पता चला, प्रगति पट्टी का उपयोग करने का कारण यह है कि एक नया पृष्ठ लोड करने के बजाय, सामग्री को जावास्क्रिप्ट के माध्यम से लोड किया जाता है, और इसलिए पृष्ठ लोडिंग के ब्राउज़र का अपना संकेतक काम नहीं कर सकता है। ताकि उपयोगकर्ता को यह महसूस न हो कि पेज "फ्रोजन" है, यह फ़ंक्शन एक छोटे यूआई-रिसेप्शन के कंधों पर स्थानांतरित किया गया था।

अब सभी को NProgress.js [ डेमो ] [ GitHub ] प्लगइन की बदौलत अपनी साइट पर ठीक वैसी ही प्रगति पट्टी बनाने का अवसर मिला है।

काम करने के लिए प्लगइन के लिए, आपको jQuery, nprogress.js और nprogress.css कनेक्ट करना होगा। इसका उपयोग करना अधिक कठिन नहीं है - बस कॉल start() और done() - पहली बात जो दिमाग में आती है, उन्हें अजाक्स कॉल से बांधना है - ajaxStart और ajaxComplete घटनाएँ:

 NProgress.start(); //  "" NProgress.done(); //        

उन्नत सुविधाएँ भी हैं:

 NProgress.set(0.3); //    NProgress.inc(); //      NProgress.configure({ ease: 'ease', speed: 500 }); //     CSS easing NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 }); 

PS और उन लोगों के लिए एक संस्करण भी है जो AngularJS पसंद करते हैं।