10+ JavaScript Progress Bar Examples

This post contains a total of 10+ JavaScript Progress Bar Examples with Source Code. All these Progress Bars are made using JavaScript & Styled using CSS.

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

Related Posts

JavaScript Progress Bar Examples

1. By Simon Goellner

Made by Simon Goellner. Battle.net Style Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,700italic,700);
.progress {
  font-size: 1.2em;
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.progress--active .progress__bar {
  opacity: 1;
}
.progress__text {
  width: 20em;
  padding: 0 0.9em;
  position: absolute;
}
.progress__text em {
  font-style: normal;
}
.progress__bar {
  color: white;
  font-size: 12px;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  line-height: 19px;
  display: block;
  position: relative;
  top: -1px;
  left: -1px;
  width: 0%;
  height: 100%;
  opacity: 0;
  border: 1px solid;
  border-radius: 2px 0 0 2px;
  background-size: 100px 30px, 130px 30px, 130px 30px;
  background-position: -20% center, right center, left center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease;
  -webkit-animation: pulse 2s ease-out infinite;
          animation: pulse 2s ease-out infinite;
  background-color: rgba(201, 4, 20, 0.95);
  background-image: linear-gradient(90deg, rgba(226, 4, 22, 0) 10%, rgba(250, 6, 26, 0.8) 30%, #fb1f31 70%, rgba(250, 6, 26, 0.8) 80%, rgba(226, 4, 22, 0) 90%), linear-gradient(to right, rgba(251, 31, 49, 0) 0%, #fb1f31 100%), linear-gradient(to left, rgba(251, 31, 49, 0) 0%, #fb1f31 100%);
  border-color: #fb3848;
  box-shadow: 0 0 0.6em #fa061a inset, 0 0 0.4em #e20416 inset, 0 0 0.5em rgba(201, 4, 20, 0.5), 0 0 0.1em rgba(254, 206, 210, 0.5);
}
.progress__bar--orange {
  background-color: rgba(201, 47, 0, 0.95);
  background-image: linear-gradient(90deg, rgba(227, 53, 0, 0) 10%, rgba(252, 59, 0, 0.8) 30%, #ff4d17 70%, rgba(252, 59, 0, 0.8) 80%, rgba(227, 53, 0, 0) 90%), linear-gradient(to right, rgba(255, 77, 23, 0) 0%, #ff4d17 100%), linear-gradient(to left, rgba(255, 77, 23, 0) 0%, #ff4d17 100%);
  border-color: #ff6030;
  box-shadow: 0 0 0.6em #fc3b00 inset, 0 0 0.4em #e33500 inset, 0 0 0.5em rgba(201, 47, 0, 0.5), 0 0 0.1em rgba(255, 214, 201, 0.5);
}
.progress__bar--yellow {
  background-color: rgba(232, 158, 0, 0.95);
  background-image: linear-gradient(90deg, rgba(255, 174, 3, 0) 10%, rgba(255, 183, 28, 0.8) 30%, #ffbf36 70%, rgba(255, 183, 28, 0.8) 80%, rgba(255, 174, 3, 0) 90%), linear-gradient(to right, rgba(255, 191, 54, 0) 0%, #ffbf36 100%), linear-gradient(to left, rgba(255, 191, 54, 0) 0%, #ffbf36 100%);
  border-color: #ffc74f;
  box-shadow: 0 0 0.6em #ffb71c inset, 0 0 0.4em #ffae03 inset, 0 0 0.5em rgba(232, 158, 0, 0.5), 0 0 0.1em rgba(255, 248, 232, 0.5);
}
.progress__bar--green {
  background-color: rgba(0, 178, 23, 0.95);
  background-image: linear-gradient(90deg, rgba(0, 204, 26, 0) 10%, rgba(0, 229, 30, 0.8) 30%, #00ff21 70%, rgba(0, 229, 30, 0.8) 80%, rgba(0, 204, 26, 0) 90%), linear-gradient(to right, rgba(0, 255, 33, 0) 0%, #00ff21 100%), linear-gradient(to left, rgba(0, 255, 33, 0) 0%, #00ff21 100%);
  border-color: #19ff37;
  box-shadow: 0 0 0.6em #00e51e inset, 0 0 0.4em #00cc1a inset, 0 0 0.5em rgba(0, 178, 23, 0.5), 0 0 0.1em rgba(178, 255, 188, 0.5);
}
.progress__bar--blue {
  background-color: rgba(18, 135, 204, 0.95);
  background-image: linear-gradient(90deg, rgba(20, 151, 227, 0) 10%, rgba(37, 162, 236, 0.8) 30%, #3dacee 70%, rgba(37, 162, 236, 0.8) 80%, rgba(20, 151, 227, 0) 90%), linear-gradient(to right, rgba(61, 172, 238, 0) 0%, #3dacee 100%), linear-gradient(to left, rgba(61, 172, 238, 0) 0%, #3dacee 100%);
  border-color: #54b6f0;
  box-shadow: 0 0 0.6em #25a2ec inset, 0 0 0.4em #1497e3 inset, 0 0 0.5em rgba(18, 135, 204, 0.5), 0 0 0.1em rgba(225, 242, 252, 0.5);
}
.progress__bar:before, .progress__bar:after {
  content: "";
  position: absolute;
  right: -1px;
  top: -10px;
  width: 1px;
  height: 40px;
}
.progress__bar:before {
  width: 7px;
  right: -4px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 75%);
}
.progress__bar:after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 100%);
}
.progress--complete .progress__bar {
  -webkit-animation: none;
          animation: none;
  border-radius: 2px;
}
.progress--complete .progress__bar:after, .progress--complete .progress__bar:before {
  opacity: 0;
}

@-webkit-keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}

@keyframes pulse {
  0% {
    background-position: -50% center, right center, left center;
  }
  100% {
    background-position: 150% center, right center, left center;
  }
}
body, html {
  color: white;
  padding: 20px 50px;
  background: #131c23;
  font-family: Roboto;
}

h1 {
  font-weight: 900;
  line-height: 1em;
  margin: 0.5em 0;
}

h1 b {
  font-weight: 100;
}
</style>
</head>
<body>
  <h1>Heading</h1>

<div class="progress">
  <b class="progress__bar">
    <span class="progress__text">
      Progress: <em>0%</em>
    </span>
  </b>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var $progress = $(".progress"),
$bar = $(".progress__bar"),
$text = $(".progress__text"),
percent = 0,
update,
resetColors,
speed = 1000,
orange = 30,
yellow = 55,
green = 85,
timer;

resetColors = function () {

  $bar.
  removeClass("progress__bar--green").
  removeClass("progress__bar--yellow").
  removeClass("progress__bar--orange").
  removeClass("progress__bar--blue");

  $progress.
  removeClass("progress--complete");

};

update = function () {

  timer = setTimeout(function () {

    percent += Math.random() * 1.8;
    percent = parseFloat(percent.toFixed(1));

    $text.find("em").text(percent + "%");

    if (percent >= 100) {

      percent = 100;
      $progress.addClass("progress--complete");
      $bar.addClass("progress__bar--blue");
      $text.find("em").text("Complete");

    } else {

      if (percent >= green) {
        $bar.addClass("progress__bar--green");
      } else

      if (percent >= yellow) {
        $bar.addClass("progress__bar--yellow");
      } else

      if (percent >= orange) {
        $bar.addClass("progress__bar--orange");
      }

      speed = Math.floor(Math.random() * 1000);
      update();

    }

    $bar.css({ width: percent + "%" });

  }, speed);

};

setTimeout(function () {

  $progress.addClass("progress--active");
  update();

}, 1000);


$(document).on("click", function (e) {

  percent = 0;
  clearTimeout(timer);
  resetColors();
  update();

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

2. By Denys Mishunov

Made by Denys Mishunov. Thermometer-like progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.loader-container {
  height: 6px;
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -300px;
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
  background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
  background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
  background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
  background-image: linear-gradient(left, #5bd8ff, #ff0000);
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
  border-radius: 3px 0 0 3px;
}
.loader-container:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin-top: -0.5em;
  margin-right: -1em;
  background-image: -webkit-linear-gradient(top, #000000, #212121);
  background-image: -moz-linear-gradient(top, #000000, #212121);
  background-image: -o-linear-gradient(top, #000000, #212121);
  background-image: -ms-linear-gradient(top, #000000, #212121);
  background-image: linear-gradient(top, #000000, #212121);
}
.loader-container.done:after {
  background: Red;
}
.run .runner {
  content: "";
  position: absolute;
  right: 0;
  height: 100%;
  width: 0%;
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, #000000, #212121);
  background-image: -moz-linear-gradient(top, #000000, #212121);
  background-image: -o-linear-gradient(top, #000000, #212121);
  background-image: -ms-linear-gradient(top, #000000, #212121);
  background-image: linear-gradient(top, #000000, #212121);
  animation: loader 10s linear;
}
.meter {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 2em;
  margin-top: 0.3em;
  color: #ff0000;
  animation: meter 10s linear;
  text-shadow: 0 -1px 0 #333;
}
.meter:after {
  content: "%";
}
@keyframes loader {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes meter {
  0% {
    color: #5bd8ff;
  }
  100% {
    color: #ff0000;
  }
}
/* Decoration */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 800;
  src: url(https://fonts.gstatic.com/s/exo/v20/4UaZrEtFpBI4f1ZSIK9d4LjJ4tMwOwRmPg.ttf) format('truetype');
}
@font-face {
  font-family: 'Give You Glory';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/giveyouglory/v15/8QIQdiHOgt3vv4LR7ahjw9-XYf10DYI.ttf) format('truetype');
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Exo', sans-serif;
  background: transparent url('https://i.ibb.co/WPkHgZH/download-1.png') repeat;
}
footer {
  font-family: 'Give You Glory', cursive;
  position: absolute;
  bottom: 2em;
  right: 1em;
  color: #777;
  font-size: 1.2em;
}
footer a {
  text-decoration: none;
  color: #777;
  border: none;
}
#wrapper {
  width: 600px;
  margin: 0 auto;
}
</style>
</head>
<body>
  <div id="wrapper">
<div class="loader-container">
  <div class="meter">0</div>
  <span class="runner"></span>
</div>
</div>

<footer>
  <a href="http://mishunov.me">Denys Mishunov</a>
	<a href="https://twitter.com/mishunov">@mishunov</a>
</footer>
      <script>
var Loader = function () {
  var loader = document.querySelector('.loader-container'),
  meter = document.querySelector('.meter'),
  k,i = 1,
  counter = function () {
    if (i <= 100) {
      meter.innerHTML = i.toString();
      i++;
    } else {
      window.clearInterval(k);
    }
  };

  return {
    init: function (options) {
      options = options || {};
      var time = options.time ? options.time : 0,
      interval = time / 100;

      loader.classList.add('run');
      k = window.setInterval(counter, interval);
      setTimeout(function () {
        loader.classList.add('done');
      }, time);
    } };

}();

Loader.init({
  time: 10000 });
    </script>
</body>
</html>

3. By Grygorii Polinovskyi

Made by Grygorii Polinovskyi. Fancy arrow-type progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>
.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.container {
	font-family: 'Lato', sans-serif;
	width: 1000px;
	margin: 0 auto;
}

.wrapper {
	display: table-cell;
	height: 400px;
	vertical-align: middle;
}

.nav {
	margin-top: 40px;
}

.pull-right {
	float: right;
}

a, a:active {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #999;
}

/* Breadcrups CSS */

.arrow-steps .step {
	font-size: 14px;
	text-align: center;
	color: #666;
	cursor: default;
	margin: 0 3px;
	padding: 10px 10px 10px 30px;
	min-width: 180px;
	float: left;
	position: relative;
	background-color: #d9e3f7;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
  transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
	content: " ";
	position: absolute;
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-top: 19px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 17px solid #d9e3f7;	
	z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
	right: auto;
	left: 0;
	border-left: 17px solid #fff;	
	z-index: 0;
}

.arrow-steps .step:first-child:before {
	border: none;
}

.arrow-steps .step:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
	position: relative;
}

.arrow-steps .step span:before {
	opacity: 0;
	content: "โœ”";
	position: absolute;
	top: -2px;
	left: -20px;
}

.arrow-steps .step.done span:before {
	opacity: 1;
	-webkit-transition: opacity 0.3s ease 0.5s;
	-moz-transition: opacity 0.3s ease 0.5s;
	-ms-transition: opacity 0.3s ease 0.5s;
	transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
	color: #fff;
	background-color: #23468c;
}

.arrow-steps .step.current:after {
	border-left: 17px solid #23468c;	
}
</style>
</head>
<body>
  <div class="container">	
<div class="wrapper">	
<div class="arrow-steps clearfix">
          <div class="step current"> <span> Step 1</span> </div>
          <div class="step"> <span>Step 2 some words</span> </div>
          <div class="step"> <span> Step 3</span> </div>
          <div class="step"> <span>Step 4</span> </div>
			</div>
		<div class="nav clearfix">
        <a href="#" class="prev">Previous</a>
        <a href="#" class="next pull-right">Next</a>
		</div>
</div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
/**/

jQuery(document).ready(function () {

  var back = jQuery(".prev");
  var next = jQuery(".next");
  var steps = jQuery(".step");

  next.bind("click", function () {
    jQuery.each(steps, function (i) {
      if (!jQuery(steps[i]).hasClass('current') && !jQuery(steps[i]).hasClass('done')) {
        jQuery(steps[i]).addClass('current');
        jQuery(steps[i - 1]).removeClass('current').addClass('done');
        return false;
      }
    });
  });
  back.bind("click", function () {
    jQuery.each(steps, function (i) {
      if (jQuery(steps[i]).hasClass('done') && jQuery(steps[i + 1]).hasClass('current')) {
        jQuery(steps[i + 1]).removeClass('current');
        jQuery(steps[i]).removeClass('done').addClass('current');
        return false;
      }
    });
  });

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

4. By Himanshu C

Made by Himanshu C. Form Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>  
<style>
*, *:after, *:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
}


/* Form Progress */
.progress {
  width: 1000px;
  margin: 20px auto;
  text-align: center;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px; height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
}
.progress .bar {
  position: relative;
  width: 80px;
  height: 6px;
  top: -33px;
  margin-left: -5px;
  margin-right: -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 30px;
  margin-left: -5px;
}

/* Done / Active */
.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progress .circle.active .title {
  color: #0c95be;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="progress">
  <div class="circle done">
    <span class="label">1</span>
    <span class="title">Personal</span>
  </div>
  <span class="bar done"></span>
  <div class="circle done">
    <span class="label">2</span>
    <span class="title">Address</span>
  </div>
  <span class="bar half"></span>
  <div class="circle active">
    <span class="label">3</span>
    <span class="title">Payment</span>
  </div>
  <span class="bar"></span>
  <div class="circle">
    <span class="label">4</span>
    <span class="title">Review</span>
  </div>
  <span class="bar"></span>
  <div class="circle">
    <span class="label">5</span>
    <span class="title">Finish</span>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function () {
  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');

  $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');

  $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');

  $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');

  $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');

  i++;

  if (i == 0) {
    $('.progress .bar').removeClass().addClass('bar');
    $('.progress div.circle').removeClass().addClass('circle');
    i = 1;
  }
}, 1000);
//# sourceURL=pen.js
    </script>
</body>
</html>

5. By Ines Montani

Made by Ines Montani. Color Changing Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
.progress {
  display: flex;
  align-items: center;
  width: 450px;
  height: 35px;
  max-width: 100%;
}
.progress::-webkit-progress-bar {
  background: #eee;
  border: 1px solid #ebebeb;
}
.progress::-webkit-progress-value {
  background: linear-gradient(to left, #f74c4a, #ea0d0a);
}
.progress::-moz-progress-bar {
  background: linear-gradient(to left, #f74c4a, #ea0d0a);
}
.progress[value^="3"]:not([value="3"])::-webkit-progress-value, .progress[value^="4"]:not([value="4"])::-webkit-progress-value, .progress[value^="5"]:not([value="5"])::-webkit-progress-value {
  background: linear-gradient(to left, #ffd44b, #fec100);
}
.progress[value^="3"]:not([value="3"])::-moz-progress-bar, .progress[value^="4"]:not([value="4"])::-moz-progress-bar, .progress[value^="5"]:not([value="5"])::-moz-progress-bar {
  background: linear-gradient(to left, #ffd44b, #fec100);
}
.progress[value^="6"]:not([value="6"])::-webkit-progress-value, .progress[value^="7"]:not([value="7"])::-webkit-progress-value, .progress[value^="8"]:not([value="8"])::-webkit-progress-value, .progress[value^="9"]:not([value="9"])::-webkit-progress-value, .progress[value="100"]::-webkit-progress-value {
  background: linear-gradient(to left, #4fd364, #2bab3f);
}
.progress[value^="6"]:not([value="6"])::-moz-progress-bar, .progress[value^="7"]:not([value="7"])::-moz-progress-bar, .progress[value^="8"]:not([value="8"])::-moz-progress-bar, .progress[value^="9"]:not([value="9"])::-moz-progress-bar, .progress[value="100"]::-moz-progress-bar {
  background: linear-gradient(to left, #4fd364, #2bab3f);
}
.progress:after {
  content: attr(value) "%";
  margin-left: 20px;
  font-weight: bold;
  width: 2em;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.button {
  width: 75px;
  height: 75px;
  flex: 0 0 75px;
  border-radius: 50%;
  color: #fff;
  border: 5px solid #fff;
}
.button.button-accept {
  background: #4fd364;
}
.button.button-reject {
  background: #f74c4a;
}
.button:first-child {
  margin-right: 25px;
}
.button:hover {
  transform: translateX(1px) translateY(1px);
}

.button-icon {
  width: 50%;
  height: 50%;
}

.progress-container {
  background: #fff;
  font: normal normal 16px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  border: 2px solid #eee;
  padding: 25px;
  max-width: 100%;
}

.container {
  max-width: 100%;
  padding: 25px;
}

svg {
  fill: currentColor;
}

body {
  background: #fff url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/316871/geometry_mint.png);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
}
</style>
</head>
<body>
  <div class="container">
  <div class="progress-container">
    <progress class="progress" id="progress" value="25" max="100"></progress>
  </div>
  <div class="buttons">
    <button class="button button-accept" id="accept">
      <svg class="button-icon" width="24" height="24" viewBox="0 0 24 24">
        <path d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"></path>
      </svg>
    </button>
    <button class="button button-reject" id="reject">
      <svg class="button-icon" width="24" height="24" viewBox="0 0 24 24">
        <path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>
      </svg>
    </button>
  </div>
</div>
      <script>
var progress = document.getElementById('progress');

document.getElementById('accept').addEventListener('click', function () {
  if (progress.value < 100) progress.value += 5;
}, false);

document.getElementById('reject').addEventListener('click', function () {
  progress.value -= 5;
}, false);
    </script>
</body>
</html>

6. By June Hanabi

Made by June Hanabi. Progress Bar Liquid Bubble. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  background-color: #1a1a1a;
  font-family: sans-serif;
  font-size: 15px;
  color: #ccc;
}
input[type="text"] {
  background-color: transparent;
  margin-top: 30px;
  border: 0;
  border-bottom: solid 1px #8080ff;
  text-align: center;
  font-size: 20px;
  color: #518bf0;
  text-shadow: 0 0 3px #518bf0;
  width: 45px;
  display: inline-block;
}
input:focus {
  outline: 0;
  border-bottom: dashed 1px #ff8080;
}
input::-moz-selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}
input::selection {
  color: #1a1a1a;
  background-color: #c6e4ee;
}
::-webkit-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
:-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
::-moz-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
:-ms-input-placeholder {
  color: #7aa6f3;
  text-shadow: 0 0 3px #7aa6f3;
}
.wrapper {
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-align: center;
  align-items: center;
  -o-box-pack: center;
  justify-content: center;
  -o-box-orient: vertical;
  flex-direction: column;
  height: 100%;
}
.green {
  margin-top: 15px;
}
.green .progress,
.red .progress,
.orange .progress {
  position: relative;
  border-radius: 50%;
}
.green .progress,
.red .progress,
.orange .progress {
  width: 250px;
  height: 250px;
}
.green .progress {
  border: 5px solid #53fc53;
}
.green .progress {
  box-shadow: 0 0 20px #029502;
}
.green .progress,
.red .progress,
.orange .progress {
  transition: all 1s ease;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  border-radius: 50%;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  width: 240px;
  height: 240px;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  border: 5px solid #1a1a1a;
}
.green .progress .inner,
.red .progress .inner,
.orange .progress .inner {
  transition: all 1s ease;
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  position: absolute;
  z-index: 1;
  width: 200%;
  height: 200%;
  left: -50%;
  border-radius: 40%;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: spin;
  animation-name: spin;
}
.green .progress .inner .water {
  top: 25%;
}
.green .progress .inner .water {
  background: rgba(83,252,83,0.5);
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  transition: all 1s ease;
}
.green .progress .inner .water,
.red .progress .inner .water,
.orange .progress .inner .water {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
.green .progress .inner .water {
  box-shadow: 0 0 20px #03bc03;
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  position: absolute;
  top: -120%;
  left: -120%;
  z-index: 5;
  width: 200%;
  height: 200%;
  transform: rotate(45deg);
  border-radius: 50%;
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  background-color: rgba(255,255,255,0.15);
}
.green .progress .inner .glare,
.red .progress .inner .glare,
.orange .progress .inner .glare {
  transition: all 1s ease;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-weight: bold;
  text-align: center;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  line-height: 240px;
  font-size: 92.3076923076923px;
}
.green .progress .inner .percent {
  color: #03c603;
}
.green .progress .inner .percent {
  text-shadow: 0 0 10px #029502;
}
.green .progress .inner .percent,
.red .progress .inner .percent,
.orange .progress .inner .percent {
  transition: all 1s ease;
}
.red {
  margin-top: 15px;
}
.red .progress {
  border: 5px solid #ed3b3b;
}
.red .progress {
  box-shadow: 0 0 20px #7a0b0b;
}
.red .progress .inner .water {
  top: 75%;
}
.red .progress .inner .water {
  background: rgba(237,59,59,0.5);
}
.red .progress .inner .water {
  box-shadow: 0 0 20px #9b0e0e;
}
.red .progress .inner .percent {
  color: #a30f0f;
}
.red .progress .inner .percent {
  text-shadow: 0 0 10px #7a0b0b;
}
.orange {
  margin-top: 15px;
}
.orange .progress {
  border: 5px solid #f07c3e;
}
.orange .progress {
  box-shadow: 0 0 20px #7e320a;
}
.orange .progress .inner .water {
  top: 50%;
}
.orange .progress .inner .water {
  background: rgba(240,124,62,0.5);
}
.orange .progress .inner .water {
  box-shadow: 0 0 20px #a0400c;
}
.orange .progress .inner .percent {
  color: #a8430d;
}
.orange .progress .inner .percent {
  text-shadow: 0 0 10px #7e320a;
}
#copyright {
  margin-top: 25px;
  background-color: transparent;
  font-size: 14px;
  color: #b3b3b3;
  text-align: center;
}
#copyright div {
  margin-bottom: 10px;
}
#copyright a,
#copyright a:link {
  color: #808080;
  text-decoration: none;
  border-bottom: 1px solid #808080;
  padding-bottom: 2px;
}
#copyright a:active {
  color: #b3b3b3;
}
#copyright a:hover {
  color: #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  padding-bottom: 4px;
}
.instructions {
  display: inline-block;
  margin: 5px 0;
  font-size: 16px;
}
@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="green">
    <div class="progress">
      <div class="inner">
        <div class="percent"><span>67</span>%</div>
        <div class="water"></div>
        <div class="glare"></div>
      </div>
    </div>
  </div>
  
  <span>Enter Percentage: <input type="text" placeholder="67" id="percent-box">%</span>
  
  <section id="copyright">
    <div>(c) 2015 June Hanabi - <a href="https://opensource.org/licenses/MIT">License MIT</a> </div>
    
     <div>Work is modified and inspired from <a href="https://codepen.io/JamieDixon/pen/Pqrjvv">Jamie Dixon's pen</a></div>
  </section>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var colorInc = 100 / 3;

$(function ()
{
  $("#percent-box").click(function ()
  {
    $(this).select();
  });

  $("#percent-box").keyup(function ()
  {
    var val = $(this).val();

    if (val != "" &&
    !isNaN(val) &&
    val <= 100 &&
    val >= 0)
    {
      console.log(val);

      var valOrig = val;
      val = 100 - val;

      if (valOrig == 0)
      {
        $("#percent-box").val(0);
        $(".progress .percent").text(0 + "%");
      } else
      $(".progress .percent").text(valOrig + "%");

      $(".progress").parent().removeClass();
      $(".progress .water").css("top", val + "%");

      if (valOrig < colorInc * 1)
      $(".progress").parent().addClass("red");else
      if (valOrig < colorInc * 2)
      $(".progress").parent().addClass("orange");else

      $(".progress").parent().addClass("green");
    } else

    {
      $(".progress").parent().removeClass();
      $(".progress").parent().addClass("green");
      $(".progress .water").css("top", 100 - 67 + "%");
      $(".progress .percent").text(67 + "%");
      $("#percent-box").val("");
    }
  });
});
    </script>
</body>
</html>
 

7. By Cliff Pyles

Made by Cliff Pyles. Circular Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400|Hind:400,500,600'>
<style>
html,
body {
  height: 100%;
  width: 100%;
}
html,
button,
input,
select,
textarea {
  color: #5e5e5e;
  -webkit-font-smoothing: antialiased;
}
body {
  background-color: #f0f1f1;
  font: 1rem/1.2 Montserrat, Helvetica, Helvetica Neue, Arial;
}
.page {
  display: flex;
  align-items: center;
  align-content: center;
  width: 275px;
  margin: 20px auto;
}
.progress-bar {
  display: inline-block;
  width: 275px;
  height: 275px;
  margin: 7px;
  padding: 0;
}
.progress-bar .progress-active {
  position: relative;
  top: -279px;
}
.progress-bar p {
  position: relative;
  margin: 0;
  padding: 0;
  width: 275px;
  top: -460px;
  font-size: 54px;
  font-weight: 900;
  text-align: center;
}
#progressControllerContainer {
  position: absolute;
  top: 320px;
  padding: 10px 80px;
}
input[type=range] {
  -webkit-appearance: none;
  margin: 38px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  background: #ffffff;
  border-radius: 0px;
  border: 1px solid #e6e6e6;
}
input[type=range]::-webkit-slider-thumb {
  border: 1px solid #d6d6d6;
  height: 38px;
  width: 20px;
  border-radius: 5px;
  background: #e1e1e1;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  background: #ffffff;
  border-radius: 0px;
  border: 1px solid #e6e6e6;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #d6d6d6;
  height: 38px;
  width: 20px;
  border-radius: 5px;
  background: #e1e1e1;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 20px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 0px;
}
input[type=range]::-ms-fill-upper {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 0px;
}
input[type=range]::-ms-thumb {
  border: 1px solid #d6d6d6;
  height: 38px;
  width: 20px;
  border-radius: 5px;
  background: #e1e1e1;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ffffff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ffffff;
}
</style>
</head>
<body>
  <!-- JJ -->
<div id="page" class="page">
  <div class="progress-bar">
	  <canvas id="inactiveProgress" class="progress-inactive" height="275px" width="275px"></canvas>
    <canvas id="activeProgress" class="progress-active"  height="275px" width="275px"></canvas>
    <p>0%</p>
  </div>
  <div id="progressControllerContainer">
    <input type="range" id="progressController" min="0" max="100" value="15" />
  </div
</div>
<!-- SDG -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var $pc = $('#progressController');
  var $pCaption = $('.progress-bar p');
  var iProgress = document.getElementById('inactiveProgress');
  var aProgress = document.getElementById('activeProgress');
  var iProgressCTX = iProgress.getContext('2d');


  drawInactive(iProgressCTX);

  $pc.on('change', function () {
    var percentage = $(this).val() / 100;
    drawProgress(aProgress, percentage, $pCaption);
  });

  function drawInactive(iProgressCTX) {
    iProgressCTX.lineCap = 'square';

    //outer ring
    iProgressCTX.beginPath();
    iProgressCTX.lineWidth = 15;
    iProgressCTX.strokeStyle = '#e1e1e1';
    iProgressCTX.arc(137.5, 137.5, 129, 0, 2 * Math.PI);
    iProgressCTX.stroke();

    //progress bar
    iProgressCTX.beginPath();
    iProgressCTX.lineWidth = 0;
    iProgressCTX.fillStyle = '#e6e6e6';
    iProgressCTX.arc(137.5, 137.5, 121, 0, 2 * Math.PI);
    iProgressCTX.fill();

    //progressbar caption
    iProgressCTX.beginPath();
    iProgressCTX.lineWidth = 0;
    iProgressCTX.fillStyle = '#fff';
    iProgressCTX.arc(137.5, 137.5, 100, 0, 2 * Math.PI);
    iProgressCTX.fill();

  }
  function drawProgress(bar, percentage, $pCaption) {
    var barCTX = bar.getContext("2d");
    var quarterTurn = Math.PI / 2;
    var endingAngle = 2 * percentage * Math.PI - quarterTurn;
    var startingAngle = 0 - quarterTurn;

    bar.width = bar.width;
    barCTX.lineCap = 'square';

    barCTX.beginPath();
    barCTX.lineWidth = 20;
    barCTX.strokeStyle = '#00B4FF';
    barCTX.arc(137.5, 137.5, 111, startingAngle, endingAngle);
    barCTX.stroke();

    $pCaption.text(parseInt(percentage * 100, 10) + '%');
  }

  var percentage = $pc.val() / 100;
  drawProgress(aProgress, percentage, $pCaption);


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

8. By Shankar Cabus

Made by Shankar Cabus. Flat Progress Bar. Source

JavaScript Progress Bar by Shankar Cabus
<!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">
<style>
.progress-pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}
.progress-pie-chart.gt-50 {
  background-color: #81CE97;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 200px, 200px, 100px);
}
.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  clip: rect(0, 100px, 200px, 0);
  background: #81CE97;
  transform: rotate(60deg);
}
.gt-50 .ppc-progress {
  clip: rect(0, 100px, 200px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 200px, 200px, 100px);
  background: #E5E5E5;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 173.9130434783px/2);
  top: calc(50% - 173.9130434783px/2);
  width: 173.9130434783px;
  height: 173.9130434783px;
  background: #fff;
  text-align: center;
  display: table;
}
.ppc-percents span {
  display: block;
  font-size: 2.6em;
  font-weight: bold;
  color: #81CE97;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

body {
  font-family: Arial;
  background: #f7f7f7;
}

.progress-pie-chart {
  margin: 50px auto 0;
}
</style>
</head>
<body>
  <div class="progress-pie-chart" data-percent="99">
  <div class="ppc-progress">
    <div class="ppc-progress-fill"></div>
  </div>
  <div class="ppc-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$(function () {
  var $ppc = $('.progress-pie-chart'),
  percent = parseInt($ppc.data('percent')),
  deg = 360 * percent / 100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
  $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
  $('.ppc-percents span').html(percent + '%');
});
    </script>
</body>
</html>

9. By Derek Hill

Made by Derek Hill. Image Preloader Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body{
  background: #e7e7e7;
  font-family: Arial, Helvetica, Sans-serif;
  text-align: center;
  padding: 5px;
  margin: 0;
}

.loader{
  margin: 50px auto 10px;
  width: 300px;
  height: 25px;
  border-radius: 14px;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #999;
  background: #ccc;
  overflow: hidden;
  position: relative;
}

.loader.gray{
  background: #999;
}

.progress-bar{
  height: inherit;
  width: 0%;
  border-radius: inherit;
  position: relative;
  overflow: hidden;
}

.progress-stripes{
  width: inherit;
  height: inherit;
  font-size: 180px;
  font-weight: bold;
  margin-top: -50px;
  letter-spacing: -14px;
}

.percentage{
  position: absolute;
  top: 4px;
  right: 5px;
  font-weight: bold;
  font-size: 16px;
}



/***************************************/
/* BELOW HERE IS SOLELY FOR AESTHETICS */
/*_____________________________________*/

/*** COLOR SCHEMES ***/

/* RED */
.red .progress-bar{
  background: #e74c3c;
}
.red .progress-stripes{
  color: #c0392b;
}
.red .percentage{
  color: #eee;
}

/* BLUE */
.blue .progress-bar{
  background: #3498db;
}
.blue .progress-stripes{
  color: #2980b9;
}
.blue .percentage{
  color: #eee;
}

/* GREEN */
.green .progress-bar{
  background: #2ecc71;
}
.green .progress-stripes{
  color: #27ae60;
}
.green .percentage{
  color: #fff;
}

/* YELLOW */
.yellow .progress-bar{
  background: #f1c40f;
}
.yellow .progress-stripes{
  color: #f39c12;
}
.yellow .percentage{
  color: #fff;
}

/* PURPLE */
.purple .progress-bar{
  background: #9b59b6;
}
.purple .progress-stripes{
  color: #8e44ad;
}
.purple .percentage{
  color: #eee;
}

/* GRAY */
.gray .progress-bar{
  background: #ecf0f1;
}
.gray .progress-stripes{
  color: #bdc3c7;
}
.gray .percentage{
  color: #333;
}

/*** LOADED ***/

span{
  color: #888;
  text-shadow: 0 1px 0 #fff;
}

span.loaded.red{
  color: #c0392b;
}

span.loaded.blue{
  color: #2980b9;
}

span.loaded.green{
  color: #27ae60;
}

span.loaded.yellow{
  color: #d35400;
}

span.loaded.purple{
  color: #8e44ad;
}

span.loaded.gray{
  color: #444;
}

/*** SKINS ***/
.skins{
  padding: 4px 0 8px;
  cursor: default;
  font-size: 14px;
  color: #666;
  background: #fff;
  opacity: .5;
  -moz-transition: opacity .25s linear;
  -webkit-transition: opacity .25s linear;
  transition: opacity .25s linear;
}

.skins:hover{
  opacity: 1;
}

.skin{
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-bottom: -7px;
  border: 1px solid #fff;
  display: inline-block;
    *display: inline;
    zoom: 1.0;
}
#red{
  background: #c0392b;
}
#red:hover{
  background: #e74c3c;
}
#blue{
  background: #2980b9;
}
#blue:hover{
  background: #3498db;
}
#green{
  background: #27ae60;
}
#green:hover{
  background: #2ecc71;
}
#yellow{
  background: #f39c12;
}
#yellow:hover{
  background: #f1c40f;
}
#purple{
  background: #8e44ad;
}
#purple:hover{
  background: #9b59b6;
}
#gray{
  background: #7f8c8d;
}
#gray:hover{
  background: #95a5a6;
}
</style>
</head>
<body>
<!-- skins -->
<div class="skins">
		Click to change skin
		<div class="skin" id="red"></div>
		<div class="skin" id="blue"></div>
		<div class="skin" id="green"></div>
		<div class="skin" id="yellow"></div>
		<div class="skin" id="purple"></div>
		<div class="skin" id="gray"></div>
	</div>

<!-- actual preloader -->
	<div class="loader">
		<div class="progress-bar"><div class="progress-stripes"></div><div class="percentage">0%</div></div>
	</div>

	<span>Loading...</span>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
/* SET RANDOM LOADER COLORS FOR DEMO PURPOSES */
var demoColorArray = ['red', 'blue', 'green', 'yellow', 'purple', 'gray'];
var colorIndex = Math.floor(Math.random() * demoColorArray.length);
setSkin(demoColorArray[colorIndex]);


/* RANDOM LARGE IMAGES FOR DEMO PURPOSES */
var demoImgArray = ['http://www.hdwallpapers.in/walls/halloween_2013-wide.jpg', 'http://www.hdwallpapers.in/walls/2013_print_tech_lamborghini_aventador-wide.jpg', 'http://www.hdwallpapers.in/walls/ama_dablam_himalaya_mountains-wide.jpg', 'http://www.hdwallpapers.in/walls/arrow_tv_series-wide.jpg', 'http://www.hdwallpapers.in/walls/anna_in_frozen-wide.jpg', 'http://www.hdwallpapers.in/walls/frozen_elsa-wide.jpg', 'http://www.hdwallpapers.in/walls/shraddha_kapoor-wide.jpg', 'http://www.hdwallpapers.in/walls/sahara_force_india_f1_team-HD.jpg', 'http://www.hdwallpapers.in/walls/lake_sunset-wide.jpg', 'http://www.hdwallpapers.in/walls/2013_movie_cloudy_with_a_chance_of_meatballs_2-wide.jpg', 'http://www.hdwallpapers.in/walls/bates_motel_2013_tv_series-wide.jpg', 'http://www.hdwallpapers.in/walls/krrish_3_movie-wide.jpg', 'http://www.hdwallpapers.in/walls/universe_door-wide.jpg', 'http://www.hdwallpapers.in/walls/night_rider-HD.jpg', 'http://www.hdwallpapers.in/walls/tide_and_waves-wide.jpg', 'http://www.hdwallpapers.in/walls/2014_lamborghini_veneno_roadster-wide.jpg', 'http://www.hdwallpapers.in/walls/peeta_katniss_the_hunger_games_catching_fire-wide.jpg', 'http://www.hdwallpapers.in/walls/captain_america_the_winter_soldier-wide.jpg', 'http://www.hdwallpapers.in/walls/puppeteer_ps3_game-wide.jpg', 'http://www.hdwallpapers.in/walls/lunar_space_galaxy-HD.jpg', 'http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg', 'http://www.hdwallpapers.in/walls/destiny_2014_game-wide.jpg', 'http://www.hdwallpapers.in/colors_of_nature-wallpapers.html', 'http://www.hdwallpapers.in/walls/sunset_at_laguna_beach-wide.jpg'];

// Stripes interval
var stripesAnim;
var calcPercent;

$progress = $('.progress-bar');
$percent = $('.percentage');
$stripes = $('.progress-stripes');
$stripes.text('////////////////////////');

/* CHANGE LOADER SKIN */
$('.skin').click(function () {
  var whichColor = $(this).attr('id');
  setSkin(whichColor);
});

// Call function to load array of images
preload(demoImgArray);

// Call function to animate stripes
stripesAnimate();

/* WHEN LOADED */
$(window).load(function () {
  loaded = true;
  $progress.animate({
    width: "100%" },
  100, function () {
    $('span').text('Loaded!').addClass('loaded');
    $percent.text('100%');
    clearInterval(calcPercent);
    clearInterval(stripesAnim);
  });
});

/*** FUNCTIONS ***/

/* LOADING */
function preload(imgArray) {
  var increment = Math.floor(100 / imgArray.length);
  $(imgArray).each(function () {
    $('<img>').attr("src", this).load(function () {
      $progress.animate({
        width: "+=" + increment + "%" },
      100);
    });
  });
  calcPercent = setInterval(function () {

    //loop through the items
    $percent.text(Math.floor($progress.width() / $('.loader').width() * 100) + '%');

  });
}

/* STRIPES ANIMATION */
function stripesAnimate() {
  animating();
  stripesAnim = setInterval(animating, 2500);
}

function animating() {
  $stripes.animate({
    marginLeft: "-=30px" },
  2500, "linear").append('/');
}

function setSkin(skin) {
  $('.loader').attr('class', 'loader ' + skin);
  $('span').hasClass('loaded') ? $('span').attr('class', 'loaded ' + skin) : $('span').attr('class', skin);
}
    </script>
</body>
</html>

10. By Michael Foley

Made by Michael Foley. Audio Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
.container {
  width: 80%;
  background: #ddd;
  margin: calc(50vh - 30px) auto;
  text-align: center;
  padding-bottom: 10px;
}

.progress {
  width: 1px;
  height: 3px;
  background: #006B5A;
  transition: width 0.1s linear;
}

.togglePlay {
  font: 0/0 a;
  background: #006B5A;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto 0;
  width: 64px;
  height: 64px;
  border: 1px solid #00382f;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms ease-out;
}
.togglePlay:after {
  box-sizing: border-box;
  display: block;
  content: "";
  width: 0;
  height: 0;
  margin-left: 8px;
  border-color: transparent;
  border-style: solid;
  border-top-width: 16px;
  border-bottom-width: 16px;
  border-left-width: 19px;
  border-left-color: rgba(255, 255, 255, 0.9);
}
.togglePlay:hover {
  transform: scale(1.05);
}
.togglePlay.active:after {
  width: 21px;
  height: 26px;
  margin-left: 0;
  border-width: 0 7px;
  border-color: rgba(255, 255, 255, 0.9);
}
</style>
</head>
<body>
  <div class="container">
  <div class="progress" id="progress"></div>
  <audio id="audio" src="https://www.freesound.org/data/previews/338/338825_1648170-lq.mp3"></audio>
  <button class="togglePlay" onClick="togglePlay()">Play/Pause</button>
</div>
      <script>
var timer;
var percent = 0;
var audio = document.getElementById("audio");
audio.addEventListener("playing", function (_event) {
  var duration = _event.target.duration;
  advance(duration, audio);
});
audio.addEventListener("pause", function (_event) {
  clearTimeout(timer);
});
var advance = function (duration, element) {
  var progress = document.getElementById("progress");
  increment = 10 / duration;
  percent = Math.min(increment * element.currentTime * 10, 100);
  progress.style.width = percent + '%';
  startTimer(duration, element);
};
var startTimer = function (duration, element) {
  if (percent < 100) {
    timer = setTimeout(function () {advance(duration, element);}, 100);
  }
};

function togglePlay(e) {
  e = e || window.event;
  var btn = e.target;
  if (!audio.paused) {
    btn.classList.remove('active');
    audio.pause();
    isPlaying = false;
  } else {
    btn.classList.add('active');
    audio.play();
    isPlaying = true;
  }
}
    </script>
</body>
</html>
 

11. By alecs popa

Made by alecs popa. Steps Progress Bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html{text-align:center;}
progress[value]{width:300px;height:50px;border:1px solid #ccc;border-radius:2px;margin:100px 0;color:#fff;
	background: -moz-linear-gradient(left, #0057a9 0%, #0057a9 19%, transparent 19%, transparent 21%, #79ce00 21%, #79ce00 39%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 39%, transparent 41%, #fcff00 41%, #fcff00 59%, transparent 59%, transparent 61%, #ffb750 61%, #ffb750 79%, transparent 79%, transparent 81%, #ff0000 81%, #ff0000 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0057a9), color-stop(19%,#0057a9), color-stop(19%,transparent), color-stop(21%,transparent), color-stop(21%,#79ce00), color-stop(39%,#79ce00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(39%,transparent), color-stop(41%,transparent), color-stop(41%,#fcff00), color-stop(59%,#fcff00), color-stop(59%,transparent), color-stop(61%,transparent), color-stop(61%,#ffb750), color-stop(79%,#ffb750), color-stop(79%,transparent), color-stop(81%,transparent), color-stop(81%,#ff0000), color-stop(100%,#ff0000));
	background: -webkit-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: -o-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: -ms-linear-gradient(left, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	background: linear-gradient(to right, #0057a9 0%,#0057a9 19%,transparent 19%,transparent 21%,#79ce00 21%,#79ce00 39%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 39%,transparent 41%,#fcff00 41%,#fcff00 59%,transparent 59%,transparent 61%,#ffb750 61%,#ffb750 79%,transparent 79%,transparent 81%,#ff0000 81%,#ff0000 100%);
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
progress[value]::-webkit-progress-bar{background-color:transparent;position:relative;}
progress[value]::-webkit-progress-value{width:100%;background-color:#fff;background-size:100%;position:relative;overflow:hidden;
	 -webkit-transition:width 0.6s ease;
	-moz-transition:width 0.6s ease;
	-o-transition:width 0.6s ease;
	transition:width 0.6s ease;
}
</style>
</head>
<body>
  <progress value="100" max="100"></progress>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
var progressVal = $('progress').val(),
progressStep = 20,
progressDirection = 1;

setInterval(function () {
  console.log(progressDirection, progressVal);

  if (progressDirection > 0 && progressVal < 100) {
    progressVal += progressStep;
    $('progress').val(progressVal);
  } else if (progressDirection < 0 && progressVal > 0) {
    progressVal -= progressStep;
    $('progress').val(progressVal);
  } else if (progressVal == 100) {
    progressDirection = -1;
  } else if (progressVal == 0) {
    progressDirection = 1;
  }
}, 500);
    </script>
</body>
</html>