Progress Bar

Style 1

HTML 5

CSS 3

jQuery

PHP

Style 2

HTML 5

CSS 3

jQuery

PHP

Style 3

HTML 5

CSS 3

jQuery

PHP

		
<h3 class="sc-sub-title">Style 1</h3>
<h4 class="progress-title">HTML 5</h4>
<div class="progress">
  <div class="progress-bar" style="width: 95%;"></div>
</div>
<h4 class="progress-title">CSS 3</h4>
<div class="progress">
  <div class="progress-bar" style="width: 90%;"></div>
</div>
<h4 class="progress-title">jQuery</h4>
<div class="progress">
  <div class="progress-bar" style="width: 65%;"></div>
</div>
<h4 class="progress-title">PHP</h4>
<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>
<h3 class="sc-sub-title">Style 2</h3>
<h4 class="progress-title">HTML 5</h4>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 95%;"></div>
</div>
<h4 class="progress-title">CSS 3</h4>
<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 90%;"></div>
</div>
<h4 class="progress-title">jQuery</h4>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 65%;"></div>
</div>
<h4 class="progress-title">PHP</h4>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 50%;"></div>
</div>
<h3 class="sc-sub-title">Style 3</h3>
<h4 class="progress-title">HTML 5</h4>
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 95%;"></div>
</div>
<h4 class="progress-title">CSS 3</h4>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 90%;"></div>
</div>
<h4 class="progress-title">jQuery</h4>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 65%;"></div>
</div>
<h4 class="progress-title">PHP</h4>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 50%;"></div>
</div>
		
	
		
.progress-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  margin: 0 0 5px;
}
.progress {
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  height: 8px;
}
.progress-bar {
  background-color: #f05a66;
  box-shadow: none;
}
.progress-bar.progress-bar-success {
  background-color: #5cb85c;
}
.progress-bar.progress-bar-info {
  background-color: #5bc0de;
}
.progress-bar.progress-bar-warning {
  background-color: #f0ad4e;
}
.progress-bar.progress-bar-danger {
  background-color: #d9534f;
}
		
	

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background