Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A CodePen by Stephen Fairbanks. Super Simple Progress Bar - This progress bar uses the HTML5 custom data-* attribute to allow for quick updating to a progress bar animated by Zepto (or jQuery). The animation is wrapped in a window.resize function to reanimate if the browser size is changed.
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="25">
<div class="progress-bar progress"></div>
</div>
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
@import "compass";
.progress {
width: 100%;
height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: #ddd;
left: 0;
position: absolute;
top: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment