A CodePen by Eric. Progress Bar - Experimentation with a new widget for the Spiceworks ui-toolkit.

index.html

<div class="pb-container">
  <div class="progress-bar" data-size="large" data-number="true" data-animation="true" data-percentage="50"></div>
</div>

<div class="pb-container">
  <div class="progress-bar" data-size="medium" data-number="true" data-animation="true" data-percentage="60"></div>
</div>

<div class="pb-container">
  <div class="progress-bar" data-size="small" data-number="true" data-animation="true" data-percentage="70"></div>
</div>

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

script.js

/* ============================================================
 * sui-progress-bar.js
 * ============================================================
 * Copyright © 2006-13 Spiceworks, Inc.  All Rights Reserved.  http://www.spiceworks.com
 * ============================================================ */

/* ============================================================
 * OPTIONS
 * animation: boolean // determine whether or not bar animates to position
 * number:    boolean // toggle the percentage number
 * size:      string  // set the size of the bar ('small', 'medium', or 'large')
 * ============================================================ */

!function($) {
  "use strict";
  
  var ProgressBar = function(element, options) {
    this.init(element, options);
  };
  
  ProgressBar.prototype = {
    init: function(element, options) {
      this.options = options;
      this.field = $(element);

      this.field.addClass('progress-bar-' + options.size);

      // append the completed element...
      this.completed = $('<div class="progress-bar-completed" />');
      this.completed.addClass('progress-bar-completed-' + options.size);

      this.field.after(this.completed);

      if(this.options.number) {
        this.numberElem = $('<h3 class="progress-bar-number"/>');

        // the small progress bar has the number below it
        if(this.options.size === 'small') {
          this.numberElem.width(this.field.width());
          this.numberElem.addClass('progress-bar-number-small');
          this.completed.after(this.numberElem);
        } else {
          this.numberElem.appendTo(this.completed);
        }
      }

      this.update();
    },
    update: function() {
      this.percentage = this.options.percentage;

      if(this.percentage === NaN) {
        this.percentage = 0;
      }

      if(typeof this.percentage === 'string') {
        this.percentage = parseInt(this.percentage, 10);
      }
      this.percentage = Math.abs(this.percentage);
      
      // if given a fraction, convert into whole number
      if(this.percentage < 1) {
        this.percentage = this.percentage * 100;
      }
      
      if(this.percentage > 100) {
        this.percentage = 100;
      }
      
      var width = this.field.width();
      this.step = width / 100;
      this.progress_width = this.step * this.percentage;
      
      if(this.options.animation) {
        this.completed.animate({
          width: this.progress_width
        }, {
          duration: 500
        });
      } else {
        this.completed.css('width', this.progress_width);
      }
              
      this.adjustNumber(this);
    },
    adjustNumber: function(that) {
      console.log(that.options.size);
      if(that.options.number) {
        if(that.options.size !== 'small') {
          // if there's not enough room, put the text to the right
          if(that.numberElem.width() + 40 > that.completed.width()) {
            that.numberElem.addClass('progress-bar-number-right');
            that.numberElem.css('margin-left', this.progress_width + 10 + 'px');
          } else {
            that.numberElem.removeClass('progress-bar-number-right');
          }
        } else {
          that.numberElem.addClass('progress-bar-number-right');
        }
        
        that.numberElem.text(this.percentage + '%');
      }
    }
  };
  
  $.fn.progressBar = function(percentage, option) {
    var def = {
      percentage: percentage,
      animation: true,
      number: true,
      size: 'large'
    };

    option = $.extend(def, option);
    var options;
    var data;
    
    return this.each(function() {
      var $this = $(this),
      data = $this.data('progressBar'),
      options = typeof option === 'object' && option
      if(!data) {
        options = $.extend(options, $this.data());
        $this.data('progressBar', (data = new ProgressBar(this, options)));
      } else {
        data.options.percentage = percentage;
        console.log(data);
        data.update();
      }
    });
  }

  // apply to all .progress-bar elements...
  $(function() {
    $('.progress-bar').progressBar();
  });
}(window.jQuery);

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

style.scss

@import "compass";
body {
  font-family: sans-serif;
}

.pb-container {
  margin-bottom: 20px;
}

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

.progress-bar-large {
  height: 25px;
}

.progress-bar-medium {
  height: 15px;
}

.progress-bar-small {
  height: 5px;
}

.progress-bar-completed {
  border: solid #0076A3 1px;
  background: #198BC4;
  width: 1px;
  border-radius: 3px;
  background: #1f8ddc;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFmOGRkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTc4YmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #1f8ddc 0%, #1978ba 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f8ddc), color-stop(100%,#1978ba));
  background: -webkit-linear-gradient(top,  #1f8ddc 0%,#1978ba 100%);
  background: -o-linear-gradient(top,  #1f8ddc 0%,#1978ba 100%);
  background: -ms-linear-gradient(top,  #1f8ddc 0%,#1978ba 100%);
  background: linear-gradient(to bottom,  #1f8ddc 0%,#1978ba 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8ddc', endColorstr='#1978ba',GradientType=0 );
}

.progress-bar-number {
  float: right;
  margin: 0;
  margin-right: 5px;
  color: white;
  line-height:23px;
  text-shadow: 0px 1px #0076a3, -0px 1px #444;
}

.progress-bar-number-right {
  float: none;
  color: #1a1a1a;
  margin-left: 10px;
  text-shadow: none;
}

.progress-bar-completed-large {
  height: 25px;
  margin-top: -27px;
  
  .progress-bar-number {
    margin-top: 2px;
    font-size: 13px;
  }
}

.progress-bar-completed-medium {
  height: 15px;
  margin-top: -17px;
  
  .progress-bar-number {
    font-size: 11px;
    margin-top: -4px;
  }
}

.progress-bar-completed-small {
  height: 5px;
  margin-top: -7px;
}

.progress-bar-number-small {
  color: #333;
  margin: 0;
  font-size: 11px;
  text-align: center;
  margin-left: 0;
}

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

#progress {
}