Skip to content

Instantly share code, notes, and snippets.

@thathurtabit
Created March 22, 2013 13:35
Show Gist options
  • Save thathurtabit/5221309 to your computer and use it in GitHub Desktop.
Save thathurtabit/5221309 to your computer and use it in GitHub Desktop.
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.
<div class="progress-wrap progress" data-progress-percent="22">
<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
$('.progress-bar').animate({
left: progressTotal
}, animationLength, 'ease-in-out');
}
@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