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>