स्टॅक केलेले बार, अॅनिमेटेड पार्श्वभूमी आणि मजकूर लेबल्ससाठी समर्थन वैशिष्ट्यीकृत बूटस्ट्रॅप सानुकूल प्रगती बार वापरण्यासाठी दस्तऐवजीकरण आणि उदाहरणे.
हे कसे कार्य करते
प्रगती घटक दोन HTML घटक, रुंदी सेट करण्यासाठी काही CSS आणि काही गुणधर्मांसह तयार केले आहेत. तुम्ही प्रोग्रेस बार स्टॅक करू शकता, त्यांना अॅनिमेट करू शकता आणि त्यावर मजकूर लेबले ठेवू शकता याची खात्री करून आम्ही HTML5 <progress>घटक वापरत नाही .
.progressप्रोग्रेस बारचे कमाल मूल्य दर्शविण्यासाठी आम्ही रॅपर म्हणून वापरतो .
.progress-barआतापर्यंतची प्रगती दर्शवण्यासाठी आम्ही आतील वापरतो .
त्यांची रुंदी सेट करण्यासाठी .progress-barइनलाइन शैली, उपयुक्तता वर्ग किंवा सानुकूल CSS आवश्यक आहे.
ते प्रवेशयोग्य बनवण्यासाठी काही आणि विशेषता .progress-barदेखील आवश्यक आहेत .rolearia
ते सर्व एकत्र ठेवा आणि तुमच्याकडे खालील उदाहरणे आहेत.
रुंदी सेट करण्यासाठी बूटस्ट्रॅप मूठभर उपयुक्तता प्रदान करते . तुमच्या गरजांवर अवलंबून, हे त्वरीत प्रगती कॉन्फिगर करण्यात मदत करू शकतात.
लेबल्स
मध्ये मजकूर ठेवून तुमच्या प्रगती पट्ट्यांमध्ये लेबल जोडा .progress-bar.
२५%
उंची
आम्ही फक्त वर एक heightमूल्य सेट केले आहे .progress, म्हणून तुम्ही ते मूल्य बदलल्यास आतील भाग .progress-barआपोआप त्यानुसार आकार बदलेल.
पार्श्वभूमी
वैयक्तिक प्रगती बारचे स्वरूप बदलण्यासाठी पार्श्वभूमी उपयुक्तता वर्ग वापरा.
अनेक बार
तुम्हाला आवश्यक असल्यास प्रगती घटकामध्ये एकाधिक प्रगती बार समाविष्ट करा.
स्ट्रीप ग्रेडियंट देखील अॅनिमेटेड केले जाऊ शकते. CSS3 अॅनिमेशनद्वारे उजवीकडून डावीकडे पट्टे अॅनिमेट करण्यासाठी .progress-bar-animatedजोडा ..progress-bar