Phone: 1-800-123-4567

Email:info@example.com

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>

Contact Details

Telephone:(212)888-77-88
Email: info@joomla51.com
Website: www.joomla51.com

The Dunes, Top Road,
Strandhill,
Co. Sligo,
Ireland

Portfolio Highlights

Disclaimer

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.