Bootstrap Progress Bar Kaise Banaye?
Bootstrap Progress Bar Kaise Banaye? Hello Friends इस article में progress bar के बारे में जानेंगे की ये होता क्या है और इसे कैसे create किया जाता है। आपने कभी ध्यान दिया हो तो कभी हम जब कोई file को transfer करते है या download करते है तो धीरे -धीरे process show होता है की कितना % complete हो चूका है।
तो अगर आप एक designer है तो आपके लिए बहुत काम की चीज़ है। तो चलिए सीखते है Bootstrap Progress Bar Kaise Banaye ?
Progress Bar Kya Hota Hai ?
Progress Bar एक graphical control element है जिसका use computer operation जैसे download , file transfer , or installation के progression को visualize करने के लिया किया जाता है। कभी-कभी, graphics percent format में progress को textual representation के साथ show करता है।
इस concept को media players में “playback bars” के लिए भी use किया जाता है ,जो की media players में media file की duration में current location को track करके रखता है।
Basic Progress Bar
एक Progress Bar का use किसी user को यह show करने के लिए किया जा सकता है कि वह कितनी दूर है / या कितना process में है। Bootstrap serveral types के progress bars provide करता है।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
</div>
</div>एक default progress bar create करने के लिए , container element में एक .progress नाम की class add करनी होती है। उसके बाद child element में .progress-bar नाम की class use करनी होती है।
उसके बाद css की width property का use करके उसकी width को set किया जाता है।
Progress Bar With Label
Bar Lables का use percentage show करने के लिए किया जाता है। इनके अंदर text show किया जाता है , जिससे कि पता चल सके कि कितना percent complete हो गया है।
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>इन्हे भी पढ़ें-
- Bootstrap Grid System Kya Hota Hai ? कैसे काम करता है?
- XML Kya Hai? | What is XML In Hindi | Introduction Of XML
- HTML Elements kya Hote hai ? | HTML Elements List
- Server Kya Hai ? और यह कैसे काम करता है ? | Types of Server
- Web Hosting Kya Hai ? कैसे काम करता है ? | Types of Web Hosting in Hindi
- Cloud Hosting Kya Hai? | Cloud Hosting Full Details
- Shared Hosting Kya Hai? | Shared Hosting Full Details
- Domain Authority Kya Hai ? Kaise Increase Kare ? Full Information
- CSS Selectors Kya Hai ? | CSS Selectors In Hindi ?
- CSS Kya Hai ? | What is CSS in Hindi | CSS का उपयोग कैसे किया जाता है ?
- Html Tag | Html Tag क्या है ? | Types Of Tags | Tag को कैसे use करें ?
Colored Progress Bars
By default progress bar का color blue होता है। पर आप bootstrap की कोई सी भी contextual background classes का use करके color change कर सकते है।
ये कुछ contextual classes है bootstrap की progress bars के लिए जिन्हे आप use कर सकते है।
.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger
<!--Blue-->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:20%">
20% Complete
</div>
</div>
<!--Green-->
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<!--Turquoise-->
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<!--Orange-->
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<!--Red-->
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
Striped Progress Bars
Progress bars stripes के साथ भी create किये जा सकते है। उसके लिए आपको Add करनी होगी .progress-bar-striped नाम की एक class:
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
Stacked Progress Bars
जब multiple bars create करने होते तो हम इस class का use करेंगे <div class=”progress”></div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
Conclusion
इस लेख के जरिये आपने जाना कि Progress Bar क्या होता है? Progress Bar को कैसे create किया जाता है , और ये कितनी तरह के होते है। आशा है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में Progress Bar से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।
