Bootstrap Progress bar with Examples in Hindi

Bootstrap Progress Bar

Progress Bar का use किसी task, process, download, upload या किसी activity की completion को percentage के रूप में दिखाने के लिए किया जाता है। उदाहरण के लिए, अगर कोई task 50% complete हो चुका है, तो Progress Bar को 50% तक भरा हुआ दिखाया जा सकता है।

Bootstrap में Progress Bar बनाना काफी आसान है। इसके लिए मुख्य रूप से .progress और .progress-bar classes का उपयोग किया जाता है। इसके अलावा Bootstrap में अलग-अलग colors, striped design, animated stripes और multiple progress bars जैसी सुविधाएँ भी मिलती हैं।

Bootstrap Progress Bar की Basic Structure

Bootstrap Progress Bar में .progress class outer container का काम करती है, जबकि .progress-bar class actual progress को represent करती है। Progress की मात्रा सामान्यतः style="width: 50%;" जैसे CSS width से निर्धारित की जाती है।

• .progress → Progress Bar का wrapper/container
• .progress-bar → Actual progress bar
• width: 50% → Progress की मात्रा 50% बताता है
• bg-success, bg-danger आदि → Progress Bar का color बदलने के लिए
• progress-bar-striped → Striped design के लिए
• progress-bar-animated → Stripes को animate करने के लिए

1. Basic Progress Bar

सबसे basic Progress Bar बनाने के लिए outer element पर progress और अंदर वाले element पर progress-bar class लगाई जाती है। नीचे दिए example में Progress Bar की width 50% है।

इस example में width: 50% होने के कारण Progress Bar आधे container तक दिखाई देता है। इसी तरह width: 75% करने पर 75% progress दिखाई जाएगी।

Accessibility Attributes

Example में role="progressbar", aria-valuenow, aria-valuemin और aria-valuemax attributes भी दिए गए हैं। ये attributes progress की current और possible range को describe करने में मदद करते हैं।

• aria-valuenow="50" → Current progress 50 है।
• aria-valuemin="0" → Minimum value 0 है।
• aria-valuemax="100" → Maximum value 100 है।

2. Different Background Colors

Bootstrap Progress Bar को अलग-अलग colors देने के लिए Bootstrap की background utility classes का इस्तेमाल किया जा सकता है। जैसे bg-success, bg-info, bg-warning और bg-danger।

Common color classes:

• bg-success → Green
• bg-info → Blue/Cyan tone
• bg-warning → Yellow
• bg-danger → Red
• bg-primary → Primary Bootstrap color
• bg-dark → Dark color

Color का selection progress के meaning के अनुसार किया जा सकता है। उदाहरण के लिए successful completion को bg-success और error या failed process को bg-danger से represent किया जा सकता है।

3. Striped Progress Bar

Bootstrap में progress-bar-striped class का उपयोग Progress Bar के अंदर stripes pattern दिखाने के लिए किया जाता है। इससे normal solid bar की जगह striped appearance दिखाई देती है।

progress-bar-striped केवल visual striped pattern add करता है। इसमें stripes अपने आप move नहीं करती हैं। Moving stripes के लिए progress-bar-animated class का भी इस्तेमाल करना पड़ता है।

4. Animated Stripes

अगर striped Progress Bar में moving animation चाहिए, तो progress-bar-animated class का इस्तेमाल किया जाता है। सामान्यतः इसे progress-bar-striped के साथ use किया जाता है।

यहाँ progress-bar-striped stripes बनाता है और progress-bar-animated उन stripes को move करने के लिए animation apply करता है।

5. Multiple Bars in One Progress

एक ही .progress container के अंदर एक से अधिक .progress-bar elements रखे जा सकते हैं। इससे अलग-अलग हिस्सों को अलग-अलग colors के साथ एक ही Progress Bar में represent किया जा सकता है।

नीचे के example में 40%, 30% और 20% के तीन sections हैं। इनकी total width 90% है, इसलिए container का 10% हिस्सा खाली रहेगा।

Progress Percentage कैसे Change करें?

Progress की percentage बदलने के लिए style="width: X%" में X की value बदलनी होती है। उदाहरण के लिए:

• width: 25%; → 25% progress
• width: 50%; → 50% progress
• width: 75%; → 75% progress
• width: 100%; → पूरा Progress Bar

Progress Bar में Text क्यों दिखाया जाता है?

Progress Bar के अंदर percentage text जैसे 50% लिखने से user को visual bar के साथ exact progress भी समझ आती है। हालांकि text दिखाना आवश्यक नहीं है; केवल colored bar भी बनाया जा सकता है।

Progress Bar की Important Classes

Class	काम
.progress	Progress Bar का outer container बनाता है।
.progress-bar	Actual progress section बनाता है।
.progress-bar-striped	Progress Bar में stripes दिखाता है।
.progress-bar-animated	Striped Progress Bar को animate करता है।
.bg-success	Success/green background देता है।
.bg-info	Info color देता है।
.bg-warning	Warning/yellow color देता है।
.bg-danger	Danger/red color देता है।
.bg-primary	Primary Bootstrap color देता है।

Bootstrap Progress Bar के Practical Uses

Progress Bar का उपयोग केवल design के लिए नहीं होता, बल्कि user को किसी process की current स्थिति समझाने के लिए भी किया जा सकता है। इसके कुछ common uses हैं:

• File या software download progress दिखाना।
• File upload की completion दिखाना।
• Online course या learning module की progress दिखाना।
• Registration या form completion percentage दिखाना।
• Profile completion percentage दिखाना।
• Project या task completion status दिखाना।
• Quiz या test में completed questions का percentage दिखाना।

Progress Bar और Width का Relationship

Bootstrap Progress Bar में width ही मुख्य रूप से यह तय करती है कि bar कितनी दूर तक भरी हुई दिखाई देगी। उदाहरण के लिए अगर outer container की पूरी width 100% है और inner bar की width 60% है, तो inner bar लगभग 60% area cover करेगी।

इसी कारण dynamic website में JavaScript या PHP से मिलने वाली percentage value को CSS width में इस्तेमाल करके Progress Bar को dynamically update किया जा सकता है।

Progress Bar की कुछ Important बातें

• Progress Bar के लिए Bootstrap CSS का loaded होना जरूरी है।
• .progress outer container के रूप में काम करता है।
• .progress-bar actual progress को display करता है।
• Progress percentage बदलने के लिए width value बदली जाती है।
• Striped design के लिए progress-bar-striped use किया जाता है।
• Moving stripes के लिए progress-bar-animated use किया जाता है।
• एक ही container में multiple progress bars रखे जा सकते हैं।
• Meaningful color selection से progress की स्थिति समझना आसान हो सकता है।

In Short:

• .progress → Progress Bar का wrapper/container
• .progress-bar → Actual progress bar
• style="width: X%" → Progress percentage set करता है
• bg-* → Progress Bar का background color बदलता है
• .progress-bar-striped → Striped design देता है
• .progress-bar-animated → Stripes को moving animation देता है
• Multiple .progress-bar → एक ही container में multiple sections बनाने के लिए

Conclusion

Bootstrap Progress Bar किसी process की completion को visually represent करने का एक simple और useful component है। Bootstrap की .progress और .progress-bar classes की मदद से basic progress bar बनाया जा सकता है, जबकि background classes से colors, progress-bar-striped से stripes और progress-bar-animated से animation add किया जा सकता है।

इसका उपयोग websites और web applications में downloads, uploads, course progress, task completion, profile completion और अन्य processes की स्थिति दिखाने के लिए किया जा सकता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---