बूटस्ट्रॅप स्पिनर्ससह घटक किंवा पृष्ठाची लोडिंग स्थिती दर्शवा, पूर्णपणे HTML, CSS आणि कोणत्याही JavaScript सह तयार केलेले.
बद्दल
बूटस्ट्रॅप "स्पिनर्स" चा वापर तुमच्या प्रोजेक्ट्समध्ये लोडिंग स्टेट दर्शविण्यासाठी केला जाऊ शकतो. ते फक्त HTML आणि CSS सह तयार केले आहेत, म्हणजे ते तयार करण्यासाठी तुम्हाला कोणत्याही JavaScript ची आवश्यकता नाही. तथापि, त्यांची दृश्यमानता टॉगल करण्यासाठी तुम्हाला काही सानुकूल JavaScript आवश्यक असेल. त्यांचे स्वरूप, संरेखन आणि आकारमान आमच्या आश्चर्यकारक उपयुक्तता वर्गांसह सहजपणे सानुकूलित केले जाऊ शकतात.
प्रवेशयोग्यता हेतूंसाठी, येथे प्रत्येक लोडरमध्ये role="status"आणि नेस्टेड समाविष्ट आहे <span class="sr-only">Loading...</span>.
बॉर्डर स्पिनर
लाइटवेट लोडिंग इंडिकेटरसाठी बॉर्डर स्पिनर वापरा.
लोड करत आहे...
रंग
बॉर्डर स्पिनर currentColorत्याच्यासाठी वापरतो, म्हणजे तुम्ही टेक्स्ट कलर युटिलिटीसहborder-color रंग सानुकूलित करू शकता . तुम्ही आमची कोणतीही मजकूर रंग उपयुक्तता मानक स्पिनरवर वापरू शकता.
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
border-colorयुटिलिटीज का वापरत नाहीत ? प्रत्येक बॉर्डर स्पिनर transparentकिमान एका बाजूसाठी बॉर्डर निर्दिष्ट करतो, त्यामुळे .border-{color}युटिलिटीज त्या ओव्हरराइड करतील.
वाढणारा स्पिनर
तुम्हाला बॉर्डर स्पिनर आवडत नसल्यास, ग्रो स्पिनरवर स्विच करा. जरी ते तांत्रिकदृष्ट्या फिरत नसले तरी ते वारंवार वाढते!
लोड करत आहे...
पुन्हा एकदा, हा स्पिनर सोबत बांधला गेला आहे , ज्यामुळे तुम्ही मजकूर रंग उपयुक्ततेसहcurrentColor त्याचे स्वरूप सहज बदलू शकता . येथे ते समर्थित प्रकारांसह निळ्या रंगात आहे.
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
लोड करत आहे...
संरेखन
बूटस्ट्रॅपमधील स्पिनर्स rems currentColor, आणि display: inline-flex. याचा अर्थ ते सहजपणे आकार बदलले जाऊ शकतात, पुन्हा रंगविले जाऊ शकतात आणि द्रुतपणे संरेखित केले जाऊ शकतात.
जोडा .spinner-border-smआणि .spinner-grow-smएक लहान स्पिनर बनवा जो इतर घटकांमध्ये पटकन वापरता येईल.
लोड करत आहे...
लोड करत आहे...
किंवा, आवश्यकतेनुसार आकारमान बदलण्यासाठी सानुकूल CSS किंवा इनलाइन शैली वापरा.
लोड करत आहे...
लोड करत आहे...
बटणे
एखादी क्रिया सध्या प्रक्रिया करत आहे किंवा होत आहे हे दर्शविण्यासाठी बटणांमध्ये स्पिनर वापरा. तुम्ही स्पिनर घटकामधून मजकूर स्वॅप देखील करू शकता आणि आवश्यकतेनुसार बटण मजकूर वापरू शकता.