A Pen by Trisha Salas.

Fixed-&-Responsive-Animated-Progress-Bars.markdown

Fixed & Responsive Animated Progress Bars

This shows two progress bar animations, one with a fixed pixel width, and the other fully responsive.

Animation is done with the JavaScript interval method as the looper.

A Pen by Trisha Salas on CodePen.

License.

index.html

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div class="progress-fixed">
	<figure>
		<div class="progress-fixed__bar"></div>
		<div class="progress-fixed__percent"></div>
	</figure>
</div><!-- .progress-fixed -->

<div class="progress-responsive">
	<figure>
		<div class="progress-responsive__bar"></div>
		<div class="progress-responsive__percent"></div>
	</figure>
</div><!-- .progress-responsive -->

script.js

var BG = {}; // BAR GRAPH window object

// FIXED
BG.fixed = function(percentage, duration) {
	var pixels = Math.floor(percentage * 2.5); // Percent as a whole number times 2.5 for 250 max pixels
	// Animate bar graph
	var count1 = 0,
      bar = $('.progress-fixed__bar'),
      interval1 = Math.floor(duration / pixels),
      incrementer1 = setInterval(function() {
		(count1 <= pixels) ? (bar.width(count1), count1++) : clearInterval(incrementer1);
	}, interval1);
	// Animate percent number
	var count2 = 0,
      percent = $('.progress-fixed__percent'),
      interval2 = Math.floor(duration / percentage),
      incrementer2 = setInterval(function() {
		(count2 <= percentage) ? (percent.text(count2 + "%"), count2++) : clearInterval(incrementer2);
	}, interval2);
};

// RESPONSIVE
BG.responsive = function(percentage, duration) {
	// Animate bar graph
	var count1 = 0,
      bar = $('.progress-responsive__bar'),
      interval1 = (Math.floor(duration / percentage) / 2),
      incrementer1 = setInterval(function() {
		(count1 <= percentage) ? (bar.width(count1 + "%"), count1 += 0.5) : clearInterval(incrementer1);
	}, interval1);
	// Animate percent number
	var count2 = 0,
      percent = $('.progress-responsive__percent'),
      interval2 = Math.floor(duration / percentage),
      incrementer2 = setInterval(function() {
		(count2 <= percentage) ? (percent.text(count2 + "%"), count2++) : clearInterval(incrementer2);
	}, interval2);
};

BG.init = function() {
	BG.fixed(100, 2000);  // Percentage, duration
  BG.responsive(100, 2000);  // Percentage, duration
};

$(function() {
	BG.init();
})();

style.css

body {
  padding: 50px;
}

.progress-fixed {
	width: 250px;
}
.progress-responsive {
  width: 90%;
}


/* Progress bar containers */
figure {
	position: relative;
  width: 100%;
	height: 50px;
	border: 2px solid #9ea0a2;
	border-radius: 8px;
	background: #cecece;
	background: -moz-linear-gradient(top,  #cecece 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cecece), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top,  #cecece 0%,#ffffff 100%);
	background: -o-linear-gradient(top,  #cecece 0%,#ffffff 100%);
	background: -ms-linear-gradient(top,  #cecece 0%,#ffffff 100%);
	background: linear-gradient(to bottom,  #cecece 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=0 );
}
/* Progress bar shape */
figure div:first-child {
	width: 0;
	height: 50px;
	border-radius: 6px;
}
/* Blue bar */
.progress-fixed .progress-fixed__bar {
	background: #00bbdb;
	background: -moz-linear-gradient(top,  #00bbdb 0%, #2b659d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00bbdb), color-stop(100%,#2b659d));
	background: -webkit-linear-gradient(top,  #00bbdb 0%,#2b659d 100%);
	background: -o-linear-gradient(top,  #00bbdb 0%,#2b659d 100%);
	background: -ms-linear-gradient(top,  #00bbdb 0%,#2b659d 100%);
	background: linear-gradient(to bottom,  #00bbdb 0%,#2b659d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bbdb', endColorstr='#2b659d',GradientType=0 );
}
/* Green bar */
.progress-responsive .progress-responsive__bar {
  background: #00ff00;
background: -webkit-gradient(linear, 0 100%, 0 0, from(#ccffcc), to(#00ff00));
background: -webkit-linear-gradient(#ccffcc 0%, #00ff00 100%);
background: -moz-linear-gradient(#ccffcc 0%, #00ff00 100%);
background: -o-linear-gradient(#ccffcc 0%, #00ff00 100%);
background: linear-gradient(#ccffcc 0%, #00ff00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffcc', endColorstr='#00ff00',GradientType=0 ); /* IE6-8 */
}
/* Percent text */
figure div:last-child {
	position: absolute;
	top: 10px;
	right: 8px;
	font-size: 25px;
	font-weight: bold;
  font-family: sans-serif;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 10px #000;
}