Progress Bar

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

    <!-- Contextual color variations -->
    <div class="progress">
      <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

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

Example: Default Progressbar

Example: Contextual Color

Example: Striped

Example: Striped Animated

  
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

Example:

  
    <div data-value="0.85"
      data-thickness="6"
          class="circle1"
      data-fill="{
          "color": "#7bd1df"
          }" >
      <strong>85%</strong>
      <span class="text">Wordpress</span>
    </div>

Example:

85% Wordpress
65% Web Design
87% Html
83% Jquery