How to Add a Progress Bar with Bootstrap

How to Add a Progress Bar with Bootstrap

How to Add a Bootstrap Progress Bar 3 – today i want share bootstrap progress bar, before i already share Progress bar. but this different progress bar this use bootstrap for make a progress bar. if your blog has been no bootstrap please read the tutorial Bootstrap 3 in Blogger

How to add bootstrap progress bar in blogger ?

  1. Go To Blogger > Yourblog > Layout > Add a Gadget > HTML/Javascript
  2. Choose Style Progress Bar

Do not forget to replace the value style=”width: 45%” and the aria-valuenow=”45″ with the number you want

Basic Progress Bar

45% Complete
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width:45%">
<span class="sr-only">45% Complete</span>
</div>
</div>

you can add this selector for change color
progress-bar-success progress-bar-info progress-bar-warning progress-bar-danger
add after name “progress-bar”
example : “progress-bar progress-bar-danger”

<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width:45%">
45%
</div>
</div>;
45% Complete

Progress Bar With Label

45%
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width:45%">
45%
</div>
</div>;

Progress Bar Color With Label
if you want without label change 30% Complete (success) with <span class=”sr-only”>30% Complete (success)</span>

30% Complete (success)
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (success)
</div>
</div>
30% Complete (info)
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (info)
</div>
</div>
30% Complete (warning)
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (warning)
</div>
</div>
30% Complete (danger)
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (danger)
</div>
</div>

Striped Progress Bars

30% Complete (success)
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (success)
</div>
</div>
30% Complete (info)
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (info)
</div>
</div>
30% Complete (warning)
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (warning)
</div>
</div>
30% Complete (danger)
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete (danger)
</div>
</div>

Make Animated Progress Bar
Progress Bar Striped Animated

30% Complete
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100" style="width:30%">
30% Complete
</div>
</div>

Add a Comment

Your email address will not be published. Required fields are marked *