Mprogress.js के साथ आसानी से सामग्री डिजाइन प्रगति पट्टी बनाएँ
इस बात से कोई इंकार नहीं करता कि Google का है सामग्री डिजाइन ने मूल रूप से वेब को बदल दिया है। यह एक प्रदान करता है आम डिजाइन भाषा वह UI डिज़ाइनर सभी वेबसाइटों और मोबाइल एप्लिकेशन पर लागू हो सकता है.
इस सामग्री के डिजाइन की प्रवृत्ति ने कई पुस्तकालयों को लोकप्रिय मटेरियल फ्रेमवर्क सहित प्रेरित किया है। और एक सबसे नई सामग्री परियोजनाएं मैंने पाया है Mprogress.js.
यह जावास्क्रिप्ट लाइब्रेरी एक उत्पन्न करता है सामग्री-शैली प्रगति बार शुद्ध सीएसएस और जावास्क्रिप्ट का उपयोग करना. कोई निर्भरता नहीं, कोई बकवास नहीं। बस सरल लोडिंग (और प्रीलोडिंग) एक सामग्री डिजाइन के साथ जो किसी भी वेबसाइट या वेब एप्लिकेशन से मेल खाएगा.
सेटअप बहुत सरल है और केवल दो फ़ाइलों की आवश्यकता है: Mprogress से एक CSS और JS स्क्रिप्ट.
आप ऐसा कर सकते हैं दोनों को डाउनलोड करें GitHub रेपो से या एक पैकेज प्रबंधक का उपयोग करें जैसे कि npm या Bower। वहाँ से, आप की जरूरत है एक नया Mprogress ऑब्जेक्ट बनाएँ और इसे लोडर शुरू करने के लिए कहें.
यह शाब्दिक रूप से किया जा सकता है कोड की एक पंक्ति:
var mprogress = new Mprogress ('start'); अन्य गुण ऐनिमेशन समय की गति, गति या प्रदर्शन रंग बदलने के लिए लागू किया जा सकता है। यह कॉन्फ़िगरेशन भी आपको देता है कस्टम टेम्पलेट बनाएँ डिफ़ॉल्ट सामग्री डिजाइन शैली के आधार पर। बहुत बढ़िया!
पर एक नज़र रखना डेमो पेज कार्रवाई में इस लोडर को देखने के लिए। यह एक मज़बूत लोडिंग बार नहीं है, हालांकि यह आपको खरोंच से एक बनाने की आवश्यकता के बिना एक अच्छा समाधान प्रदान करता है.
आप जैसे तरीके चला सकते हैं सेट() सेवा मेरे प्रतिशत सेट करें या इंक () सेवा मेरे लोडिंग बार बढ़ाना. इसे HTTP लोडर बनाने के लिए प्रोग्रामेटिक रूप से हैंडल किया जा सकता है, लेकिन इसके लिए जावास्क्रिप्ट में अतिरिक्त काम करना पड़ता है.
Mprogress.js की सुंदरता है इसकी सादगी. यह आपको यह नहीं बताता कि डेटा की संरचना कैसे की जाती है या आपको लोड करने की क्या आवश्यकता है। यह पृष्ठ लोड हो सकता है, या यह एक फ़ाइल अपलोड को संभाल सकता है। या यह ट्रैक किया जा सकता है कि उपयोगकर्ता ने पृष्ठ के शीर्ष से कितनी दूर स्क्रॉल किया है.
इस पुस्तकालय के साथ और आप बहुत कुछ कर सकते हैं शून्य निर्भरता आप इसे किसी भी वेब प्रोजेक्ट के लिए उपयोग कर सकते हैं। आरंभ करने के लिए, बाहर की जाँच करें MProgress repo GitHub पर जहाँ आप भी ब्राउज़ कर सकते हैं प्रलेखन.
