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.
<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 --> |
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(); | |
})(); |
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; | |
} |