Progress Bars

Clean and Multi-purpose template made with Bootstrap

HTML5/CSS3
90% Complete (success)
JQUERY
70% Complete
PHP/MYSQL
50% Complete
WORDPRESS
30% Complete
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												<span class="sr-only">90% Complete (success)</span>
											  </div>
											</div>
											<h5>JQUERY</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													<span class="sr-only">70% Complete</span>
												</div>
											</div>
											<h5>PHP/MYSQL</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
													<span class="sr-only">50% Complete</span>
												</div>
											</div>
											<h5>WORDPRESS</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
													<span class="sr-only">30% Complete</span>
												</div>
											</div>
FACEBOOK
30% Complete (success)
PINTEREST
60% Complete
TWITTER
70% Complete
YOUTUBE
90% Complete
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
												<span class="sr-only">30% Complete (success)</span>
											  </div>
											</div>
											<h5>PINTEREST</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
													<span class="sr-only">60% Complete</span>
												</div>
											</div>
											<h5>TWITTER</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													<span class="sr-only">70% Complete</span>
												</div>
											</div>
											<h5>YOUTUBE</h5>
											<div class="progress">									
												<div class="progress-bar progress-bar-dark-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
													<span class="sr-only">90% Complete</span>
												</div>
											</div>
HTML5/CSS3
JQUERY
PHP/MYSQL
WORDPRESS
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												HTML5/CSS3
											  </div>
											</div>

											<div class="progress">									
												<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													JQUERY
												</div>
											</div>

											<div class="progress">									
												<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
													PHP/MYSQL
												</div>
											</div>

											<div class="progress">									
												<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
													WORDPRESS
												</div>
											</div>
FACEBOOK
PINTEREST
TWITTER
YOUTUBE
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
												FACEBOOK
											  </div>
											</div>
											
											<div class="progress">									
												<div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
													PINTEREST
												</div>
											</div>
											
											<div class="progress">									
												<div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													TWITTER
												</div>
											</div>
										
											<div class="progress">									
												<div class="progress-bar progress-bar-dark-red" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
													YOUTUBE
												</div>
											</div>

Border Style

90%
70%
50% Square
30% Square
Show Code 
															
										
											<div class="progress progress-extra-large progress-border">
											  <div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												90%
											  </div>
											</div>

											<div class="progress progress-extra-large progress-border">								
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													70%
												</div>
											</div>

											<div class="progress progress-extra-large progress-border square">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
													50% Square
												</div>
											</div>

											<div class="progress progress-extra-large progress-border square">								
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
													30% Square
												</div>
											</div>

Height Style

SMALL
MEDIUM
LARGE
EXTRA LARGE
NO BORDER
Show Code 
															
										
											<div class="progress progress-small">
											  <div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												SMALL
											  </div>
											</div>

											<div class="progress progress-medium">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
													MEDIUM
												</div>
											</div>

											<div class="progress progress-large">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
													LARGE
												</div>
											</div>
											
											<div class="progress progress-extra-large">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
													EXTRA LARGE
												</div>
											</div>

											<div class="progress square">									
												<div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
													NO BORDER
												</div>
											</div>

Colors

GREEN
BLUE
ORANGE
RED
LIGHT
PURPLE
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												GREEN
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												BLUE
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												ORANGE
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												RED
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-light" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												LIGHT
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												PURPLE
											  </div>
											</div>

Colors

AQUA
BROWN
DARK BLUE
LIGHT GREEN
DARK RED
TEAL
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												AQUA
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-brown" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												BROWN
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												DARK BLUE
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-light-green" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												LIGHT GREEN
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-dark-red" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												DARK RED
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
												TEAL
											  </div>
											</div>

Animated

HTML5/CSS3
JQUERY
PHP/MYSQL
WORDPRESS
Show Code 
															
										
											<div class="progress-animated">
												<div class="progress progress-extra-large progress-border square">
												  <div class="progress-bar progress-bar-teal" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" data-width="85">
												  HTML5/CSS3
												  </div>
												</div>
											</div>	
											<div class="progress-animated">
												<div class="progress progress-extra-large square">									
													<div class="progress-bar progress-bar-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-width="70">
														JQUERY
													</div>
												</div>
											</div>	
											<div class="progress-animated">
												<div class="progress progress-extra-large square">									
													<div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-width="50">
														PHP/MYSQL
													</div>
												</div>
											</div>
											<div class="progress-animated">
												<div class="progress progress-extra-large square">									
													<div class="progress-bar progress-bar-dark-blue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-width="30">
														WORDPRESS
													</div>
												</div>
											</div>

Bootstrap Progress

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
												<span class="sr-only">40% Complete (success)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
												<span class="sr-only">20% Complete</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete (warning)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
												<span class="sr-only">80% Complete (danger)</span>
											  </div>
											</div>

Striped

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
												<span class="sr-only">40% Complete (success)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
												<span class="sr-only">20% Complete</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete (warning)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
												<span class="sr-only">80% Complete (danger)</span>
											  </div>
											</div>

Animated

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
Show Code 
															
										
											<div class="progress">
											  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
												<span class="sr-only">40% Complete (success)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
												<span class="sr-only">20% Complete</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
												<span class="sr-only">60% Complete (warning)</span>
											  </div>
											</div>
											<div class="progress">
											  <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
												<span class="sr-only">80% Complete (danger)</span>
											  </div>
											</div>
2015 © All Rights Reserved. Theme by Bootstrapwizard

Style Switcher

Predefined Colors

Layout Style

Background Image

Background Color