ProgressBar.js के साथ कस्टम उत्तरदायी प्रगतिशील बार्स बनाएँ
प्रगति की पट्टियाँ वेब पर अधिकांश उपयोगकर्ताओं द्वारा व्यापक रूप से जाना जाता है। डेवलपर्स के लिए, यह अक्सर एक जटिल प्रक्रिया होती है खरोंच से एक प्रगति पट्टी बनाएँ. लेकिन इसके साथ ProgressBar.js आपको नहीं करना है!
यह मुफ्त खुला स्रोत पुस्तकालय है कोई निर्भरता नहीं है तथा सभी प्रमुख ब्राउज़रों का समर्थन करता है, IE9 सहित+.
डिफ़ॉल्ट रूप से, आप कर सकते हैं एक साधारण बार का उपयोग करें, या आप कर सकते हो कुछ बुनियादी आकृतियों से चयन करें, जैसे कि:
- इकलौती रेखा
- आधा गोला
- पूर्ण गोल
- वर्ग
- त्रिभुज
आप भी डिजाइन कर सकते हैं अपने खुद के कस्टम आकार जैसे कि एक दिल, एक बादल, या यहां तक कि आपकी वेबसाइट के लोगो का अक्षर। दी यह कुछ प्रयास ले जाएगा लेकिन अंतिम परिणाम अविश्वसनीय हो सकता है.
पुस्तकालय एसवीजी रास्तों पर काम करता है, तो अगर तुम कर सकते हो एक उल्लिखित आकार बनाएँ एसवीजी मार्कअप का उपयोग करके आप कर सकते हैं इसे चेतन करो इस प्रगति बार पुस्तकालय के साथ.
एनिमेशन भी कर सकते हैं पाठ शामिल करें या कस्टम स्टार्ट / स्टॉप पैटर्न हैं. पूर्ण एपीआई है विकल्प / कॉलबैक के साथ अधिक विवरण कि आप अपने अवकाश पर मना कर सकते हैं.
ProgressBar.js में एक छोटा सा भी है इंस्टालेशन गाइड जहां तुम कर सकते हो स्क्रिप्ट डाउनलोड करें और सेट करें Bower, npm, या अधिक सरलीकृत GitHub पृष्ठ का उपयोग करना.
और अगर आप कुछ भी शांत कर सकते हैं तो आप कर सकते हैं GitHub रेपो में अपना कोड सबमिट करें. परियोजना के निर्माता, किममो ब्रूनफेल्ट है GitHub मुद्दा खोलें जहां तुम कर सकते हो कस्टम डिजाइन प्रस्तुत करें पुस्तकालय में शामिल किया जाना है.
आप ऐसा कर सकते हैं एनिमेटेड प्रगति बार जोड़ें साइनअप पृष्ठ, अपलोड फ़ील्ड, या प्रीलोडर के रूप में किसी भी वेब पेज पर। विकल्प केवल इसके द्वारा ही सीमित हैं कितना विस्तृत है तुम पाने के लिए तैयार हो.
उदाहरण के लिए, मुझे पासवर्ड स्ट्रेंथ मीटर डेमो पसंद है एक वास्तविक उद्देश्य की सेवा करता है तथा उपयोगकर्ता अनुभव का लाभ उठाता है. यह उदाहरण आता है प्लगइन के साथ पैक किया गया, इसलिए आप इसे कॉपी कर सकते हैं और इसे अपनी पसंद के अनुसार संशोधित कर सकते हैं.
देखना और ज्यादा उदाहरण, ProgressBar.js होमपेज देखें या दिल की एनीमेशन को प्रदर्शित करने वाली इस फिडेल को देखें.
