News

Production diary

Story:

Super Simple Responsive Progress Bar

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

More stuff:

10 responses to “Super Simple Responsive Progress Bar”

  1. Alec Whitworth

    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.

    Reply
  2. Libenstein

    Is it possible to make it increase/decrease percentage while user scroll-down/up ?

    Reply
  3. Lee Collings

    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?

    Reply

Leave a Reply

  • (will not be published)