Progress Bars

Size Options

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

<h3 class="progress-label">
  Bootstrap
  <span class="pull-right">92%</span>
</h3>
<div class="progress progress-xxs">
  <div class="progress-bar progress-bar-primary"
  role="progressbar" aria-valuenow="92" 
  aria-valuemin="0" aria-valuemax="100" 
  style="width: 92%">
  </div>
</div>

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

<h3 class="progress-label">
  Bootstrap
  <span class="pull-right">92%</span>
</h3>
<div class="progress progress-xs">
  <div class="progress-bar progress-bar-primary"
  role="progressbar" aria-valuenow="92" 
  aria-valuemin="0" aria-valuemax="100" 
  style="width: 92%">
  </div>
</div>

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

<h3 class="progress-label">
  Bootstrap
  <span class="pull-right">92%</span>
</h3>
<div class="progress progress-sm">
  <div class="progress-bar progress-bar-primary"
  role="progressbar" aria-valuenow="92" 
  aria-valuemin="0" aria-valuemax="100" 
  style="width: 92%">
  </div>
</div>

Bootstrap 92%

CoffeeScript 68%

HTML/CSS 78%

<h3 class="progress-label">
  Bootstrap
  <span class="pull-right">92%</span>
</h3>
<div class="progress">
  <div class="progress-bar progress-bar-primary"
  role="progressbar" aria-valuenow="92" 
  aria-valuemin="0" aria-valuemax="100" 
  style="width: 92%">
  </div>
</div>

Color Options

Red 92%

Blue 68%

Green 78%

Aqua 78%

Yellow 92%

Brown 68%

Violet 78%

Orange 78%


Default Progress Bar

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

Striped Progress Bar

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

Animated Progress Bar

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

Stacked Progress Bar

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

Portfolio Highlights

Contact Details

Quay View,
Mullaghmore,
Co. Sligo,
Ireland

Email: info@website.com
Website: www.website.com

Disclaimer

All stock images on this template demo are for presentation purposes only, intended to represent a live site and are not included with this template. Links are provided if you wish to purchase them from their copyright owners.