A CodePen by Eric. Progress Bar - THIS SHOWS PROGRESSSSS

index.html

<div class="progress-bar">
</div>

<label for="progress">Progress</label>
<input type="text" id="progress" name="progress" value="50">
<button id="update">Update</button>

script.js

!function($) {
  "use strict";

  var ProgressBar = function(element, options) {
    var percentage = options.percentage;
    if(typeof percentage === 'string') {
      percentage = parseInt(percentage, 10);
    }
    
    percentage = Math.abs(percentage);
    // if given a fraction, convert into whole number
    if(percentage < 1) {
      percentage = percentage * 100;
    }
    
    if(percentage > 100) {
      percentage = 100;
    }
    
    var field = $(element);
    
    // check and see if we've already appended the completed part...
    if(!this.completed) {
      // append the completed element...
      this.completed = $('<div class="progress-bar-completed">');
      field.after(this.completed);
    }
    
    var width = field.width();
    var step = width / 100;
    var progress_width = step * percentage;
    if(options.animation) {
      this.completed.animate({width: progress_width}, 500);
    } else {
      this.completed.css('width', progress_width);
    }
  };
  
  ProgressBar.prototype = {
  };
  
  $.fn.progressBar = function(percentage, option) {
    option = $.extend({
      percentage: percentage,
      animation: true
    }, option);

    return this.each(function() {
      var $this = $(this)
        , data = $this.data('progressBar')
        , options = typeof option === 'object' && option
      if(!data) $this.data('progressBar', (data = new ProgressBar(this, options)));
    });
  }
}(window.jQuery);


//=====================================================================================
// argument can either be a whole number from (0 to 100) or a fraction (0.00 to 1.00)
// options object is optional 2nd argument:
// {
//    animation: boolean // determine whether or not bar animates to position
// }
//=====================================================================================

$('#update').click(function() {
  var val = parseInt($('#progress').val(), 10);
  $('.progress-bar').progressBar(val);
});

$('.progress-bar').progressBar(50, {
  animation: true
});

style.css

body {
  font-family: sans-serif;
}

.progress-bar {
  width: 300px;
  border: solid #E1E1E1 1px;
  background: #EBEBEB;
  height: 25px;
  border-radius: 3px;
}

.progress-bar-completed {
  border: solid #0076A3 1px;
  background: #198BC4;
  height: 25px;
  width: 1px;
  border-radius: 3px;
  margin-top: -27px;
  background: url(https://dl.dropbox.com/u/7063251/progress_bg.png);
}

label {
  display: block;
  margin-top: 20px;
}

#progress {
}