Super Simple Responsive Progress Bar


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.



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


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


// on page load...
// on browser resize...
$(window).resize(function() {
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
left: progressTotal
}, animationLength);

Have a play…



11 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Don't Be Shy