Boomerang

Progress Bar

  1. Home
  2. Elements
  3. Progress Bar
Web Development%
App Development%
Theme Development%
Plugin Development%
Theme Development% 
<div class="progress-item">
   <div class="progress-title">
       <h6>
           Web Development
           <span class="pull-right">
               <span class="progress-number"></span>
               %
           </span>
       </h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-brand" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>App Development
           <span class="pull-right">
               <span class="progress-number"></span>
               %
           </span>
       </h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-success" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>Theme Development
           <span class="pull-right">
               <span class="progress-number"></span>
               %
           </span>
       </h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-info" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>Plugin Development
           <span class="pull-right">
               <span class="progress-number"></span>
               %
           </span>
       </h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-warning" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>
           Theme Development
           <span class="pull-right">
               <span class="progress-number"></span>
               %
           </span>
       </h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-danger" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>
+Progress("Web Development", "34", "bg-brand")
+Progress("App Development", "72", "bg-success")
+Progress("Theme Development", "54", "bg-info")
+Progress("Plugin Development", "90", "bg-warning")
+Progress("Theme Development", "40", "bg-danger")
Web Development%
App Development%
Theme Development%
Plugin Development%
Theme Development% 
<div class="progress-item">
   <div class="progress-title">
       <h6>Web Development<span class="progress-number pull-right"></span>%</h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-brand progress-bar-striped" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>App Development<span class="progress-number pull-right"></span>%</h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-success progress-bar-striped" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>Theme Development<span class="progress-number pull-right"></span>%</h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-info progress-bar-striped" aria-valuenow="54" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>Plugin Development<span class="progress-number pull-right"></span>%</h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-warning progress-bar-striped" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>

<div class="progress-item">
   <div class="progress-title">
       <h6>Theme Development<span class="progress-number pull-right"></span>%</h6>
   </div>
   <div class="progress">
       <div class="progress-bar bg-danger progress-bar-striped" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
</div>
+Progress("Web Development", "34", "bg-brand progress-bar-striped")
+Progress("App Development", "72", "bg-success progress-bar-striped")
+Progress("Theme Development", "54", "bg-info progress-bar-striped")
+Progress("Plugin Development", "90", "bg-warning progress-bar-striped")
+Progress("Theme Development", "40", "bg-danger progress-bar-striped")