Super Simple Responsive Progress Bar

zigzag

Am I available?

Maybe, who knows?
I should, so get in touch over at Contact .

Recently for a project I threw together a quick animated and responsive Progress Bar making use of the HTML5 data-attribute.

It’s a nice and simple snippet which is easy to implement, though you’ll need jQuery.

Example:

HTML:


<div class="progress-wrap progress" data-progress-percent="25">
<div class="progress-bar progress"></div>
</div>

CSS:


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

JS:


// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function 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);
}

Have a play…

CodePen: http://codepen.io/thathurtabit/pen/ymECf
Gist: https://gist.github.com/thathurtabit/5224126

Comments

10 responses to “Super Simple Responsive Progress Bar

  1. I tried to implement your progress bar im not fantastic at JS but know little bits i know ive added all the code in the correct places but i get uncaught type error: cannot call method “data” of null. Please help.

  2. I’m also getting the ‘Uncaught TypeError’.

    Everything is spot on, but it seems I’m not the only person getting this, so there must be a reason for it.

    Have you managed to work out what this means?

Leave a Reply

Your email address will not be published. Required fields are marked *

Don't Be Shy

Get in Touch

pointed