Bootstrap Progress Bar Kaise Banaye? | Bootstrap Progress Bar

0
229
bootstrap progress bar
bootstrap progress bar

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 ?

bootstrap progress bars

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>

इन्हे भी पढ़ें-

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>
colored progress bar

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>
striped progress bar

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>
stacked progress bar

Conclusion

इस लेख के जरिये आपने जाना कि Progress Bar क्या होता है? Progress Bar को कैसे create किया जाता है , और ये कितनी तरह के होते है। आशा है यह लेख आपके लिए helpful रहा होगा । अगर आपको मन में Progress Bar से Related किसी भी तरह के कोई भी question है तो आप हमें नीचे comment कर पूछ सकते है।

LEAVE A REPLY

Please enter your comment!
Please enter your name here