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.

index.html

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

script.js

// 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');
    }

style.scss

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