7+ jQuery Progress Bar Examples

This post contains a total of 7+ jQuery Progress Bar Examples with Source Code. All these Progress Bars are made using jQuery JavaScript Library.

You can use the source code of these examples with credits to the original owner.

Related Posts

jQuery Progress Bar Examples

1. By Samuel Beard

Made by Samuel Beard. JQuery Progress Bar Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css'>
  
<style>
.container {
  width:100%;
  text-align:center;
}

.pb1 {
  width:50%;
  margin: 0 auto;
}

#progress-bar, #progress-bar2 {
    width: 0;
    height:30px;
    line-height:30px;
    background: #df6e1e;
    border-radius:4px;
    font-family:calibri;
    color:white;
    text-align: center;
    overflow: hidden;   
}
</style>
</head>
<body>
  <div class="container">
  <div class="pb1">
    <h2>Start On Load</h2>
    <div id="progress-bar"></div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
      <script>
var progressBar = $('#progress-bar'),
width = 0;

progressBar.width(width);


var interval = setInterval(function () {
  width += 1;
  progressBar.css('width', width + '%');
  document.getElementById("progress-bar").innerHTML = width;
  if (width >= 100) {
    clearInterval(interval);
  }
}, 100);
    </script>
</body>
</html>

2. By Travis Arnold

Made by Travis Arnold. SCSS/jQuery Progress Bar with Increase / Decrease Progress button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.progress {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 8px;
  margin: 50px 0 5px;
  background: #E4E7E7;
}
.progress:after {
  content: "";
  display: block;
  width: 0;
  height: 8px;
  background: #31E5E6;
  transition: width 0.5s ease-out;
}

[data-progress="1"]:after {
  width: 16.6666666667%;
}

[data-progress="2"]:after {
  width: 33.3333333333%;
}

[data-progress="3"]:after {
  width: 50%;
}

[data-progress="4"]:after {
  width: 66.6666666667%;
}

[data-progress="5"]:after {
  width: 83.3333333333%;
}

[data-progress="6"]:after {
  width: 100%;
}

body {
  background: #2D353A;
}

.container {
  text-align: center;
}

button {
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 1;
  border: none;
  font-size: 15px;
  color: #fff;
  background: orange;
  cursor: pointer;
}
button:focus {
  outline: none;
}
</style>
</head>
<body>
  <div class="container">
  <span class="progress" data-steps="6" data-progress="1"></span></br>
  <button class="last">-</button>
  <button class="next">+</button>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('button').on('click', function () {

  var $button = $(this),
  $progress = $('.progress'),
  steps = $progress.attr('data-steps'),
  value = $progress.attr('data-progress');

  if ($button.hasClass('last')) {

    if (value > 1) {
      value--;
    } else {
      value = 1;
    }
    $progress.attr('data-progress', value);
  }

  if ($button.hasClass('next')) {

    if (value !== steps) {
      value++;
    }
    $progress.attr('data-progress', value);
  }
});
    </script>
</body>
</html>

3. By Cyber-host

Made by Cyber-host. Progress bar animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
#progressbar {
  border: 1px solid #000;
  height: 30px;
  position: relative;
}

.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
  color: #000;
  }

.progress-line {
  position: absolute;
  top: 1px;
  left: 0;
  height: 28px;
  background-color: #f00;
}
</style>
</head>
<body>
  <div id="progressbar">
  <div class="progress-line"></div>
  <div class="progress-label">Loading...</div></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
      <script>
$(function () {
  var progressbar = $("#progressbar"),
  progressLabel = $(".progress-label"),
  progressLine = $(".progress-line");

  progressbar.progressbar({
    value: false,
    change: function () {
      progressLabel.text(progressbar.progressbar("value") + "%");
    },
    complete: function () {
      progressLabel.text("Complete!");
    } });


  function progress() {
    var val = progressbar.progressbar("value") || 0;
    progressbar.progressbar("value", val + 2);

    progressLine.width(val + '%');

    if (val < 99) {
      setTimeout(progress, 80);
    }
  }

  setTimeout(progress, 2000);
});
    </script>
</body>
</html>

4. By Thomas Wicker

Made by Thomas Wicker. Customizable Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
  
<style>
body {
  background-image: url("http://www.userlogos.org/files/backgrounds/ctach1991/Clouds2560x1600.jpg");
  -webkit-background-size: cover;
  background-size: cover;
}

.progress_status {
  float: left;
  width: 100%;
  padding: 0px 0px 0px 0px;
}
.progress_status .progress {
  float: left;
  width: 100%;
  height: 100px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background-color: #e8c5ff;
}
.progress_status .progress .progress-bar {
  background-color: #BF5FFF;
}
.progress_status .progress .progress-bar p {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  font-size: 6em;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 200;
  line-height: 1.4em;
  color: #ffffff;
}
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .progress_status .progress .progress-bar p {
    top: 20px;
    font-size: 4em;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
  .progress_status .progress .progress-bar p {
    top: 30px;
    font-size: 3em;
  }
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
  .progress_status .progress .progress-bar p {
    display: none;
  }
}

#checkboxes {
  float: left;
  width: 100%;
  height: auto;
  position: absolute;
  top: 135px;
  left: 0px;
  right: 0px;
  z-index: 5;
  background-color: #888888;
  padding: 15px 0px 10px 0px;
  margin-top: -35px;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}
#checkboxes ul {
  width: 153px;
  margin-left: auto;
  margin-right: auto;
}

.controls {
  float: left;
}

:not(#x) .styled-checkbox {
  position: absolute;
  opacity: 0;
}
:not(#x) .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
:not(#x) .styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
}
:not(#x) .styled-checkbox:focus + label:before, :not(#x) .styled-checkbox:hover + label:before {
  background: #BF5FFF;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.13);
}
:not(#x) .styled-checkbox:checked + label:before {
  background: #BF5FFF;
}
:not(#x) .styled-checkbox.disabled + label, :not(#x) .styled-checkbox[disabled] + label {
  color: #b8b8b8;
}
:not(#x) .styled-checkbox.disabled + label:before, :not(#x) .styled-checkbox[disabled] + label:before {
  box-shadow: none;
  background: #ddd;
}
:not(#x) .styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  background: #FFFFFF;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 #FFFFFF, 4px 0 0 #FFFFFF, 4px -2px 0 #FFFFFF, 4px -4px 0 #FFFFFF, 4px -6px 0 #FFFFFF;
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>

<section class="progress_status">

  <div class="progress">
    
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><p>Customizable Progress Bar</p>
    </div>
    
  </div>

</section>
  
<section id="checkboxes">
      
    <ul>
      
        <li class="controls">
          <input class="styled-checkbox" id="checkbox1" type="checkbox" value="20"><label for="checkbox1"></label>
        </li>
          
          <li class="controls">
          <input class="styled-checkbox" id="checkbox2" type="checkbox" value="20"><label for="checkbox2"></label>
        </li>
            
         <li class="controls">
          <input class="styled-checkbox" id="checkbox3" type="checkbox" value="20"><label for="checkbox3"></label>
        </li>
           
         <li class="controls">
          <input class="styled-checkbox" id="checkbox4" type="checkbox" value="20"><label for="checkbox4"></label>
        </li>
           
         <li class="controls">
          <input class="styled-checkbox" id="checkbox5" type="checkbox" value="20"><label for="checkbox5"></label>
        </li>
           
    </ul>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
      <script>
//@thomasjwicker --> www.thomaswicker.com

$('#checkboxes ul li input').on('click', function () {
  var emptyValue = 0;
  $('#checkboxes ul li input:checked').each(function () {
    emptyValue += parseInt($(this).val());
  });
  $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});
    </script>
</body>
</html>

5. By Keith Carpenter

Made by Keith Carpenter. Vertical jQuery Progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
#back { 
				background-image: -webkit-gradient(linear, 100% 100%, 0 0, from(#000000), to(#444444));
				background-image: -webkit-linear-gradient(bottom right, #000000 0%, #444444 100%);
				background-image: -moz-linear-gradient(bottom right, #000000 0%, #444444 100%);
				background-image: -o-linear-gradient(bottom right, #000000 0%, #444444 100%);
				background-image: linear-gradient(bottom right, #000000 0%, #444444 100%);
				margin:50px auto; 
				width:300px;
				padding:5px; 
				border-radius:10px;
			}	
			#mask { 
				margin:0 auto;
				width:10%;
				background-color: #aaa;
				height:450px; 
				border-radius:10px;
				position:relative;
			}
			#fill { 
				background-color: #BADA55 ;
				background-image: linear-gradient(bottom, rgb(187,218,85) 10%, rgb(203,240,101) 55%, rgb(231,255,150) 78%);
				background-image: -o-linear-gradient(bottom, rgb(187,218,85) 10%, rgb(203,240,101) 55%, rgb(255,255,150) 78%);
				background-image: -moz-linear-gradient(bottom, rgb(187,218,85) 10%, rgb(203,240,101) 55%, rgb(255,255,150) 78%);
				background-image: -webkit-linear-gradient(bottom, rgb(187,218,85) 10%, rgb(203,240,101) 55%, rgb(255,255,150) 78%);
				background-image: -ms-linear-gradient(bottom, rgb(187,218,85) 10%, rgb(203,240,101) 55%, rgb(255,211,150) 78%);
				border-bottom-right-radius:10px; 
				border-bottom-left-radius:10px;
				border-top-right-radius:10px; 
				border-top-left-radius:10px;
				position:absolute;
				bottom:0px;
				width:100%;
				height:10%;
				box-shadow:0 0 40px #F3FFC9; 
			}

#msg { 
  background:#ccc; 
  box-shadow: inset 0px 3px 3px rgba(0,0,0,0.3);
  border-radius: 3px; 
  color: #000;
  padding:5px;
  font-family: arial; 
  font-size: 20px;

  position: absolute; 
}
#msg:after { 
  content: " percent";
}
</style>
</head>
<body>
  <div id="back">
  <div id="msg"></div>
    <div id="mask">
        <div id="fill"></div>
    </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var totalHeight = $("#back").height();
$("#fill").animate({
  height: '+=75%' },

{
  duration: 2000,
  step: function (now, fx)
  {
    $("#msg").text(Math.round($(this).height() / totalHeight * 100));
  } });
    </script>
</body>
</html>

6. By Thomas Wicker

Made by Thomas Wicker. Animated HTML/CSS/jQuery Skills Graph. Source

jQuery Progress Bar by Thomas Wicker
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'>
<style>
#resumeProficiencies {
	float: left;
	clear: right;
	width: 500px;
	margin: 20px 0px 30px 30px;
}

#resumeProficienciesTop {
	float: left;
	clear: right;
	width: 100%;
	margin: -5px 0px 0px 0px;
	text-align: left;
	font-weight: 600;
}

#resumeProficienciesBottom {
	float: left;
	clear: right;
	width: 80%;
	margin: 2px 0px 0px 0px;
}

.progress {
	background:#e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -moz-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -ms-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: -o-linear-gradient(top, #dddddd, #e9e5e2);
	background-image: linear-gradient(top, #dddddd, #e9e5e2);  
	height:20px; 
	border-radius: 0px;
	-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;	 
	box-shadow: 0 1px 0px #bbbbbb inset, 0 1px 0 #fcfcfc;	  
}

.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto {

 -webkit-transition: width 4.50s ease !important;
 -moz-transition: width 4.50s ease !important;
   -o-transition: width 4.50s ease !important;
      transition: width 4.50s ease !important;
 }
</style>
</head>
<body>
  <div id="resumeProficiencies">
    
       <div id="resumeProficienciesTop" class="resumeProficienciesTop1">adobe creative suite cc</div><!--END resumeProficienciesTop-->

       <div id="resumeProficienciesBottom">
        <div class="progress">
          <div class="adobe progress-bar progress-bar-info" role="progressbar" style="width: 0%">
          </div>
        </div>
      </div><!--END resumeProficienciesBottom-->

      <div id="resumeProficienciesTop">html5</div><!--END resumeProficienciesTop-->
     
     <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="html progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
     </div><!--END resumeProficienciesBottom-->   

     <div id="resumeProficienciesTop">css3/css</div><!--END resumeProficienciesTop-->

     <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="css progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">jquery</div><!-- END resumeProficienciesTop -->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="jquery progress-bar progress-bar-info" role="progressbar" style="width: 0%"></div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">javascript</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="javascript progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">bootstrap</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="bootstrap progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">wordpress</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="wordpress progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">user interface (ui)</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="ui progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!-- ENDresumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">user experience (ux)</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="ux progress-bar progress-bar-info" role="progressbar" style="width: 0%">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <div id="resumeProficienciesTop">responsive web design</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="rwd progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">mobile app design</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="mobile progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->

    <div id="resumeProficienciesTop">rapid prototyping</div><!--END resumeProficienciesTop-->

    <div id="resumeProficienciesBottom">
      <div class="progress">
        <div class="rapidproto progress-bar progress-bar-info" role="progressbar" style="width: 0%">
         <span class="sr-only"></span>
       </div>
     </div>
    </div><!--END resumeProficienciesBottom-->   
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js'></script>
      <script>
$(document).ready(function () {
  $('.adobe').css('width', '100%');
  $('.html').css('width', '100%');
  $('.css').css('width', '100%');
  $('.lesssass').css('width', '50%');
  $('.jquery').css('width', '70%');
  $('.javascript').css('width', '55%');
  $('.bootstrap').css('width', '90%');
  $('.wordpress').css('width', '85%');
  $('.ui').css('width', '100%');
  $('.ux').css('width', '90%');
  $('.rwd').css('width', '85%');
  $('.mobile').css('width', '85%');
  $('.rapidproto').css('width', '95%');
});
    </script>
</body>
</html>

7. By Bastien

Made by Bastien. Animated Skill Progress bar using CSS3 & jQuery. Source

jQuery Progress Bar by Bastien
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  box-sizing: border-box;
}

.container {
  height: 300px;
  max-width: 500px;
  background: #f2f2f2;
  margin: 0 auto;
}

.progress-bar {
  margin: 0 0 10px;
  overflow: hidden;
  padding-right: 24px; /* Separate bars from container */
}

.progress-title-holder {
  padding-bottom: 7px;
  position: relative;
  margin: 5px 0;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
  color: #2e2e2e;  
}

.progress-title {
  z-index: 100;
}

.progress-number-wrapper {
  width: 100%;
  z-index: 10;
}

.progress-number-mark {
  margin-bottom: 4px;
  border-radius: 3px;
  background-color: rgb(22,23,29);
  padding: 0 8px;
  position: absolute;
  bottom: 0;   
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%); 
} 

.progress-number-wrapper,
.progress-number-mark {
  font-family: Open Sans, sans-serif;
  font-size: 11px;
  line-height: 24px;
  height: 24px;
  letter-spacing: 0px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  color: #ffffff;
}

.down-arrow {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #16171d;
  position: absolute;
  left: 50%;
  top: 100%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);  
}

.progress-content-outter {
  height: 12px;
  background-color: #ffffff;
}

.progress-content {
  height: 21px;
  background-color: rgba(67, 243, 183, .92);
  width: 0%; /* Initial value */
}
</style>
</head>
<body>
  <div class="container">
<!-- First bar -->
<div class="progress-bar" data-percentage="55%">
  <h4 class="progress-title-holder">
    <span class="progress-title">Photoshop</span>
    <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
        <span class="down-arrow"></span>
      </span>
    </span>
  </h4>
  <div class="progress-content-outter">
    <div class="progress-content"></div>
  </div>
</div> 
<!-- Second bar -->
<div class="progress-bar" data-percentage="75%">
  <h4 class="progress-title-holder clearfix">
    <span class="progress-title">Illustrator</span>
    <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
        <span class="down-arrow"></span>
      </span>
    </span>
  </h4>
  <div class="progress-content-outter">
    <div class="progress-content"></div>
  </div>
</div>
<!-- Third bar -->
<div class="progress-bar" data-percentage="100%">
  <h4 class="progress-title-holder clearfix">
    <span class="progress-title">InDesign</span>
    <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
        <span class="down-arrow"></span>
      </span>
    </span>
  </h4>
  <div class="progress-content-outter">
    <div class="progress-content"></div>
  </div>
</div> 
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
jQuery(document).ready(function () {

  jQuery('.progress-bar').each(function () {
    jQuery(this).find('.progress-content').animate({
      width: jQuery(this).attr('data-percentage') },
    2000);

    jQuery(this).find('.progress-number-mark').animate(
    { left: jQuery(this).attr('data-percentage') },
    {
      duration: 2000,
      step: function (now, fx) {
        var data = Math.round(now);
        jQuery(this).find('.percent').html(data + '%');
      } });

  });
});
    </script>
</body>
</html>

8. By Will Chapman

Made by Will Chapman. Simple Progress Bars. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html,body {
  background-color: #000;
}

.progress-bar-container {
  height: 25px;
  padding: 0px;
  background-color: #EFEFFE;
  position: relative;
  width: 100%;
}
.sbt-progress {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	padding: 0px 0px;
	background: -moz-linear-gradient(
		top,
		#ff2819 0%,
		#ab0000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff2819),
		to(#ab0000));
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 3px;
	border: 1px solid #7d0000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}
.progress {
  
}

.percentage {
  float: right;
  font-weight: bold;
  font-size: 18px;
  padding-right: 4px;
  
}

.progress-green {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	padding: 0px;
	background: -moz-linear-gradient(
		top,
		#42ff42 0%,
		#146600);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42ff42),
		to(#146600));
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #134201;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

.progress-blue {
  font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	padding: 0px;
	background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 3px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
}
</style>
</head>
<body>
  <div class="jquery-progress-bar-test-container">
</div>
<hr>
<div class="jquery-progress-bar-test-container-blue">
</div>
  <hr>
<div class="jquery-progress-bar-test-container-green">
</div>
 <hr>
<button id="increase">Go</button>
<button id="go-crazy">Go Crazy</button>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function ($) {


  function ProgressBar(container, options) {
    var defaults = {
      containerClass: "sbt-progress-bar",
      progressBarClass: "sbt-progress",
      percentageTextClass: "sbt-percentage",
      showPercentageText: true };


    this.container = container;
    this.options = $.extend({}, defaults, options);
    this._ctor();
  }

  ProgressBar.prototype = {
    _ctor: function () {
      $(this.container).addClass(this.options.containerClass);
      var progressContainer = $("<div></div>").addClass(this.options.progressBarClass).css({
        "position": "absolute",
        "top": "0px",
        "left": "0px",
        "height": "100%",
        "width": "1px" });

      if (this.options.showPercentageText)
      progressContainer.append($("<span></span>").addClass(this.options.percentageTextClass));
      progressContainer.appendTo(this.container);
    },
    progress: function (intPercentage) {
      var progress = parseInt(intPercentage);
      if (!isNaN(progress)) {
        var that = this;
        $("div." + this.options.progressBarClass, this.container).animate({
          "width": progress + "%" },
        {
          progress: function (promise, remaining, remainingTime) {
            var currWidth = parseInt(this.style.width);
            var span = $("span." + that.options.percentageTextClass, that.container);
            span.html(currWidth + "%");
            if (currWidth < 5)
            span.css("float", "left");else

            span.css("float", "");
          } });

      } else {
        throw "invalid percentage - must be an integer";
      }
    } };


  /**
   * Register the jQuery plugin
   */
  $.fn.progressBar = function (options, extra) {
    var pluginKey = "plugin_sbt_progressbar";
    return this.each(function (idx, ele) {
      if (!$.data(this, pluginKey)) {
        $.data(this, pluginKey, new ProgressBar(this, options));
      }
      console.debug(typeof options);
      if (typeof options === "string") {
        var obj = $.data(this, pluginKey);
        if (options === "progress")
        obj.progress(extra);
      }
    });
  };
})(jQuery);


$(document).ready(function () {
  $(".jquery-progress-bar-test-container").progressBar({
    containerClass: "progress-bar-container",
    progressBarClass: "sbt-progress",
    percentageTextClass: "percentage" });



  $("button#increase").on('click', function () {
    $(".jquery-progress-bar-test-container").progressBar("progress", Math.random() * 100);
  });

  $(".jquery-progress-bar-test-container-blue").progressBar({
    containerClass: "progress-bar-container",
    progressBarClass: "progress-blue",
    percentageTextClass: "percentage" });


  $(".jquery-progress-bar-test-container-green").progressBar({
    containerClass: "progress-bar-container",
    progressBarClass: "progress-green",
    percentageTextClass: "percentage" });


  $("button#go-crazy").on('click', function () {
    setInterval(function () {
      $(".jquery-progress-bar-test-container").each(function () {
        $(this).progressBar("progress", Math.random() * 100);
      });
      $(".jquery-progress-bar-test-container-blue").each(function () {
        $(this).progressBar("progress", Math.random() * 100);
      });
      $(".jquery-progress-bar-test-container-green").each(function () {
        $(this).progressBar("progress", Math.random() * 100);
      });
    }, 2000);
  });

  $("button#go-crazy").click();
});
    </script>
</body>
</html>