Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

ProgressBar.js का उपयोग कर स्टाइलिश और रेस्पॉन्सिव प्रोग्रेस बार्स बनाना

by
Difficulty:BeginnerLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

वेब पर कुछ भी तुरंत नहीं होता है। प्रोसेस को पूरा करने में लगने वाले समय में केवल अंतर होता है। कुछ प्रोसेस कुछ मिलीसेकंड में हो सकती हैं, जबकि अन्य कई सेकंड या मिनट तक लग सकते हैं। उदाहरण के लिए, आप अपने यूज़र्स द्वारा अपलोड की गई एक बहुत बड़ी इमेज एडिट कर रहे हैं, और इस प्रोसेस में कुछ समय लग सकता है।  ऐसे मामलों में, विसिटोर्स को यह बताने का एक अच्छा विचार है कि वेबसाइट कहीं भी अटक नहीं गई है लेकिन यह वास्तव में आपकी इमेज पर काम कर रही है और कुछ प्रोग्रेस कर रही है।

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

एक बेसिक प्रोग्रेस बार बनाना

एक बार जब आप अपने प्रोजेक्ट में लाइब्रेरी को शामिल कर लेते हैं, तो इस लाइब्रेरी का उपयोग करके प्रोग्रेस बार बनाना आसान है। Progressbar.js IE9+ समेत सभी प्रमुख ब्राउज़रों में सपोर्टेड है, जिसका अर्थ है कि आप इसे किसी भी वेबसाइट पर आत्मविश्वास से बना सकते हैं। आप GitHub से लाइब्रेरी का नवीनतम संस्करण प्राप्त कर सकते हैं या सीधे अपने प्रोजेक्ट में जोड़ने के लिए CDN लिंक का उपयोग कर सकते हैं।

किसी भी अप्रत्याशित व्यवहार से बचने के लिए, कृपया सुनिश्चित करें कि प्रोग्रेस बार के कंटेनर में प्रोग्रेस बार के समान एस्पेक्ट रेश्यो है। एक सर्कल के मामले में, कंटेनर का एस्पेक्ट रेश्यो 1:1 होना चाहिए क्योंकि चौड़ाई ऊंचाई के बराबर होगी। सेमिसर्किल के मामले में, कंटेनर का एस्पेक्ट रेश्यो 2:1 होना चाहिए क्योंकि चौड़ाई ऊंचाई दोगुना होनी चाहिए। इसी प्रकार, एक साधारण लाइन के मामले में, कंटेनर के पास लाइन के लिए 100:strokeWidth के एस्पेक्ट रेश्यो होना चाहिए।

एक लाइन, सर्कल, या सेमिसर्किल के साथ प्रोग्रेस बार्स का निर्माण करते समय, आप प्रोग्रेस बार बनाने के लिए बस ProgressBar.Shape() मेथड का उपयोग कर सकते हैं। इस मामले में, Shape एक Circle, Line, या SemiCircle हो सकता है। आप Shape() मेथड में दो पैरामीटर पास कर सकते हैं। पहला पैरामीटर प्रोग्रेस बार के कंटेनर की पहचान करने के लिए एक सिलेक्टर या डोम नोड है। दूसरा पैरामीटर एक ऑब्जेक्ट है जिसमें की-वैल्यू जोड़े हैं जो प्रोग्रेस बार की उपस्थिति निर्धारित करते हैं।

आप color प्रॉपर्टी का उपयोग कर प्रोग्रेस बार का कलर निर्दिष्ट कर सकते हैं। आपके द्वारा बनाये गए प्रोग्रेस बार में डिफ़ॉल्ट रूप से एक गहरा ग्रे कलर होगा। प्रोग्रेस बार की मोटाई strokeWidth प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जा सकता है। आपको यह ध्यान में रखना चाहिए कि यहां चौड़ाई पिक्सल में नहीं है लेकिन कैनवास आकार के प्रतिशत के मामले में है। उदाहरण के लिए, यदि कैनवास 200px चौड़ा है, तो 5 का strokeWidth वैल्यू एक लाइन बना देगा जो 10px मोटी है।

मुख्य प्रोग्रेस बार के अलावा, लाइब्रेरी आपको एक ट्रेलिंग लाइन खींचने की अनुमति देती है जो रीडर्स को उस पाथ को दिखाएगी जिस पर प्रोग्रेस बार बढ़ जाएगी। ट्रेल लाइन का कलर trailColor प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जा सकता है, और इसकी चौड़ाई trailWidth प्रॉपर्टी का उपयोग करके निर्दिष्ट की जा सकती है। strokeWidth की तरह, trailWidth प्रॉपर्टी चौड़ाई को प्रतिशत टर्म्स में भी गणना करती है।

प्रोग्रेस बार द्वारा अपने प्रारंभिक स्टेट से अंतिम स्टेट तक जाने के लिए कुल समय अवधि प्रॉपर्टी का उपयोग करके निर्दिष्ट किया जा सकता है। डिफ़ॉल्ट रूप से, एक प्रोग्रेस बार 800 मिलीसेकंड में अपनी एनीमेशन को पूरा करेगी।

एनीमेशन के दौरान प्रोग्रेस बार को कैसे स्थानांतरित करना चाहिए यह निर्दिष्ट करने के लिए आप easing प्रॉपर्टी का उपयोग कर सकते हैं। सभी प्रोग्रेस बार्स को डिफ़ॉल्ट रूप से linear गति के साथ स्थानांतरित किया जाएगा। एनीमेशन को और अधिक आकर्षक बनाने के लिए, आप इस वैल्यू को कुछ और आसानी से सेट कर सकते हैं जैसे easeIn, easeOut, easeInOut या bounce

आरंभिक पैरामीटर वैल्यू निर्दिष्ट करने के बाद, आप animate() मेथड का उपयोग कर प्रोग्रेस बार को एनिमेट कर सकते हैं। यह पैरामीटर तीन पैरामीटर्स को स्वीकार करता है। पहला पैरामीटर वह राशि है जिस पर आप प्रोग्रेस लाइन को एनिमेट करना चाहते हैं। दो अन्य पैरामीटर वैकल्पिक हैं। दूसरे पैरामीटर का उपयोग इनिशियलाइज़ करने के दौरान सेट किए गए किसी एनीमेशन प्रॉपर्टी वैल्यू को ओवरराइड करने के लिए किया जा सकता है। एनीमेशन समाप्त होने के बाद तीसरा पैरामीटर कॉलबैक फ़ंक्शन कुछ और करने के लिए होता है।

निम्नलिखित उदाहरण में, मैंने अभी तक जिन सभी प्रॉपर्टीज पर चर्चा की है, उनका उपयोग करके तीन अलग-अलग प्रोग्रेस बार्स का निर्माण किया है।

प्रोग्रेस बार के साथ टेक्स्ट वैल्यू एनिमेट करना

उपरोक्त उदाहरण में प्रोग्रेस बार की एनीमेशन के साथ बदलने वाली एकमात्र चीज उनकी लंबाई है। हालांकि, Progressbar.js आपको स्ट्रोकिंग लाइन की चौड़ाई और कलर जैसी अन्य फिजिकल एट्रिब्यूट को बदलने की अनुमति देता है। ऐसे मामलों में, आपको प्रोग्रेस बार को प्रारंभ करते समय from पैरामीटर के अंदर प्रोग्रेस बार के लिए प्रारंभिक वैल्यू और to पैरामीटर के अंदर अंतिम वैल्यू निर्दिष्ट करना होगा।

आप लाइब्रेरी को अपने यूज़र्स को कुछ टेक्सटुअल जानकारी दिखाने के लिए प्रोग्रेस बार के साथ एक साथ टेक्स्ट एलिमेंट बनाने के लिए भी बता सकते हैं। टेक्स्ट एक स्टेटिक वैल्यू से कुछ भी हो सकता है जो एनीमेशन की प्रोग्रेस को इंगित करता है। टेक्स्ट पैरामीटर किसी ऑब्जेक्ट को इसके वैल्यू के रूप में स्वीकार करेगा।

एलिमेंट के अंदर दिखाए जाने वाले प्रारंभिक टेक्स्ट को निर्दिष्ट करने के लिए इस ऑब्जेक्ट में value पैरामीटर हो सकता है। आप className पैरामीटर का उपयोग कर टेक्स्ट एलिमेंट में एक क्लास नाम भी जोड़ सकते हैं। यदि आप टेक्स्ट एलिमेंट में कुछ इनलाइन स्टाइल्स को लागू करना चाहते हैं, तो आप उन्हें style पैरामीटर के वैल्यू के रूप में निर्दिष्ट कर सकते हैं। style के वैल्यू को null पर सेट करके सभी डिफ़ॉल्ट स्टाइल्स को हटाया जा सकता है। यह याद रखना महत्वपूर्ण है कि डिफ़ॉल्ट वैल्यू केवल तभी लागू होते हैं जब आपने स्टाइल के अंदर किसी भी CSS प्रॉपर्टी के लिए कस्टम वैल्यू सेट नहीं किया हो।

यदि आप इसे स्वयं अपडेट नहीं करते हैं तो टेक्स्ट एलिमेंट के अंदर की वैल्यू पूरे एनीमेशन के दौरान ही रहेगी। सौभाग्य से, ProgressBar.js एक step पैरामीटर भी प्रदान करता है जिसका उपयोग प्रत्येक एनीमेशन स्टेप के साथ एक फ़ंक्शन को परिभाषित करने के लिए किया जा सकता है। चूंकि इस फंक्शन को प्रत्येक सेकेंड में कई बार बुलाया जाएगा, इसलिए आपको इसके उपयोग से सावधान रहना होगा और इसकी गणना को सरल रखना होगा।

कस्टम शेप के साथ प्रोग्रेस बार्स बनाना

कभी-कभी, आप विभिन्न शेप के साथ प्रोग्रेस बार बनाना चाहते हैं जो आपकी वेबसाइट के समग्र थीम से मेल खाते हैं। ProgressBar.js आपको Path() मेथड का उपयोग कर कस्टम शेप के साथ प्रोग्रेस बार बनाने की अनुमति देता है। यह मेथड Shape() की तरह काम करती है लेकिन प्रोग्रेस बार एनीमेशन को कस्टमाइज करने के लिए कम पैरामीटर प्रदान करती है। आप अभी भी एनीमेशन के लिए एक duration और easing वैल्यू प्रदान कर सकते हैं। यदि आप कस्टम पाथ को चित्रित करने के लिए उपयोग किए जाने वाले स्ट्रोक के कलर और चौड़ाई को एनिमेट करना चाहते हैं, तो आप इसे from और to पैरामीटर के अंदर ऐसा कर सकते हैं।

लाइब्रेरी कस्टम पाथ के लिए एक ट्रेल ड्रा करने का कोई तरीका नहीं प्रदान करती है, क्योंकि यह सिंपल लाइन्स और सर्किल के लिए होती है। हालांकि, आप अपने आप को आसानी से ट्रेल बना सकते हैं। निम्नलिखित उदाहरण में, मैंने Path() मेथड का उपयोग कर त्रिकोणीय प्रोग्रेस बार बनाई है।

जावास्क्रिप्ट कोड लिखने से पहले, हमें HTML में हमारे कस्टम SVG पाथ को परिभाषित करना होगा। यहां एक कोड है जिसका उपयोग मैंने एक साधारण त्रिकोण बनाने के लिए किया था:

आपने देखा होगा कि मैंने दो अलग-अलग पाथ एलिमेंट बनाए हैं। पहले पाथ में एक हल्का भूरा कलर होता है जो पिछले सेक्शन में सरल प्रोग्रेस बार्स के साथ देखा गया ट्रेल जैसा एक्ट करता है। दूसरा पाथ वह है जिसे हम अपने कोड के साथ एनिमेट करते हैं। हमने इसे एक id दी है जिसका उपयोग नीचे जावास्क्रिप्ट कोड में पहचानने के लिए किया जाता है।

अंतिम विचार

जैसा कि आपने इस ट्यूटोरियल में देखा था, Progressbar.js आपको आसानी से विभिन्न प्रकार के प्रोग्रेस बार्स को आसानी से बनाने की अनुमति देता है। यह आपको प्रोग्रेस बार के विभिन्न ऐट्रिब्यूट्स जैसे इसकी width और color को एनिमेट करने का विकल्प भी देता है।

इतना ही नहीं, लेकिन आप टेक्स्ट लाइब्रेरी में प्रोग्रेस दिखाने के लिए एक साथ टेक्स्ट एलिमेंट की वैल्यू को बदलने के लिए इस लाइब्रेरी का भी उपयोग कर सकते हैं। इस ट्यूटोरियल में सरल प्रोग्रेस बार्स को बनाने के लिए आपको जो कुछ जानने की आवश्यकता है उसे शामिल किया गया है। हालांकि, आप लाइब्रेरी के बारे में अधिक जानने के लिए डॉक्यूमेंटेशन के माध्यम से जा सकते हैं।

यदि ऐसा कुछ भी है जो आप मुझे इस ट्यूटोरियल से स्पष्टीकरण लेना चाहते हैं, तो कमैंट्स में मुझे बताने में संकोच न करें।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.