स्टॅक केल्ल्या बार, एनिमेटेड पार्श्वभूंय, आनी मजकूर लेबलांखातीर आदार दिवपी Bootstrap सानुकूल प्रगती पट्टी वापरपाखातीर दस्तावेजीकरण आनी उदाहरणां.
कशें काम करता
प्रगती घटक दोन HTML घटकां वांगडा तयार केल्ले आसतात, कांय CSS रुंदाय सेट करपाक, आनी कांय गुणधर्मां. आमी HTML5 <progress>
घटक वापरनात , तुमी प्रगती बार स्टॅक करूंक शकतात, तांकां एनिमेट करूंक शकतात, आनी तांचेर मजकूर लेबलां दवरूंक शकतात हाची खात्री करून.
- आमी
.progress
प्रगती बाराचे चडांत चड मोल दाखोवपाक as a wrapper वापरतात.
.progress-bar
आतां मेरेन जाल्ली प्रगती दाखोवपा खातीर आमी भितरल्याचो वापर करतात .
- तांची रुंदाय
.progress-bar
सेट करपाक इनलायन शैली, उपयुक्तताय वर्ग, वा सानुकूल CSS जाय.
- द तशेंच ताका सुलभ करपाक
.progress-bar
कांय role
आनी गुणधर्मांची गरज आसता.aria
तें सगळें एकठांय दवरल्यार तुमचे कडेन सकयल दिल्ल्यो देखी आसात.
बूटस्ट्रॅप रुंदाय सेट करपाखातीर मुठीभर उपयुक्तताय पुरवण करता . तुमच्या गरजे प्रमाणें, हे प्रगती बेगीन संरचीत करपाक मदत करूंक शकतात.
लेबलां
भितर मजकूर दवरून तुमच्या प्रगती पट्ट्यांनी लेबलां जोडात .progress-bar
.
उंचाय
आमी फकत चेर एक height
मोल सेट करतात .progress
, देखून तुमी तें मोल बदलल्यार भितरलें .progress-bar
आपोआप ते प्रमाणें आकार बदलतले.
पार्श्वभूंय
वैयक्तीक प्रगती पट्ट्यांचें रूप बदलपाक पार्श्वभूंय उपयुक्तताय वर्ग वापरात.
एका परस चड बार
तुमकां गरज पडल्यार एका प्रगती घटकांत जायत्यो प्रगती पट्ट्यो समाविष्ट करात.
पट्टीदार
प्रगती पट्टीच्या पार्श्वभूंय रंगाचेर CSS ग्रेडियेंट वरवीं पट्टी लागू .progress-bar-striped
करपाक खंयच्याय कडेन जोडात ..progress-bar
एनिमेटेड पट्टे
पट्टेदार प्रवणताय सजीव लेगीत करूं येता. CSS3 एनिमेशनां वरवीं उजवे कडल्यान दावे वटेन पट्ट्यो एनिमेट करपाक .progress-bar-animated
जोडात ..progress-bar