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@domain.com
Website: www.domain.com

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

Join our Newsletter

Sign up for our newsletter for all the
latest news and information