harmesy/jsbin.UdEgol.css

## jsbin.UdEgol.css
.progress {
  border-radius: 0;
}

## jsbin.UdEgol.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="progress progress-striped active">
    <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
    </div>
  </div>
</body>
</html>

## jsbin.UdEgol.js
(function($) {
  "use strict";

  var defaults = {
    30: function(el) {
      $(el).addClass('progress-bar-success');
    },
    60: function(el) {
      $(el).addClass('progress-bar-warning');
    },

    85: function(el) {
      $(el).addClass('progress-bar-danger');
    }
  };

  $.fn.changingBar = function(options) {
    var _self = this,
        levels;
    options = $.extend({}, defaults, options);

    function init() {
      levels = buildLevels();
      $(_self).trigger('changingBar.updated');
    }

    function getPercentage() {
      return Math.floor(100 * ($(_self).width() / $(_self).offsetParent().width()));
    }

    function buildLevels() {
      var levels = [];

      for(var i in options) {
        if(options.hasOwnProperty(i)) {
           levels.push(parseInt(i, 10));
        }
      }

      return levels;
    }

    function applyLevel(current_width) {
      var callback;

      for(var i in levels) {
        if(current_width >= levels[i]) {
          callback = options[levels[i]];
        }
      }

      if(callback !== undefined) {
        callback(_self);
      }
    }

    this.on('changingBar.updated', function() {
      applyLevel(getPercentage());
    });

    init();
  };
})(jQuery);

$('#progress-bar').changingBar();

var interval = setInterval(function() {
  var prog_bar = $('#progress-bar');
  var current_width = 100 * (parseInt(prog_bar.width(), 10) / parseInt(prog_bar.offsetParent().width(), 10));

  if(current_width >= 100) {
    clearInterval(interval);
  }

  current_width += 10;

  prog_bar.css('width', current_width + '%');
  prog_bar.trigger('changingBar.updated');
}, 1000);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="progress progress-striped active">
	<div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
	</div>
	</div>
	</body>
	</html>
	(function($) {
	"use strict";

	var defaults = {
	30: function(el) {
	$(el).addClass('progress-bar-success');
	},
	60: function(el) {
	$(el).addClass('progress-bar-warning');
	},

	85: function(el) {
	$(el).addClass('progress-bar-danger');
	}
	};

	$.fn.changingBar = function(options) {
	var _self = this,
	levels;
	options = $.extend({}, defaults, options);

	function init() {
	levels = buildLevels();
	$(_self).trigger('changingBar.updated');
	}

	function getPercentage() {
	return Math.floor(100 * ($(_self).width() / $(_self).offsetParent().width()));
	}

	function buildLevels() {
	var levels = [];

	for(var i in options) {
	if(options.hasOwnProperty(i)) {
	levels.push(parseInt(i, 10));
	}
	}

	return levels;
	}

	function applyLevel(current_width) {
	var callback;

	for(var i in levels) {
	if(current_width >= levels[i]) {
	callback = options[levels[i]];
	}
	}

	if(callback !== undefined) {
	callback(_self);
	}
	}

	this.on('changingBar.updated', function() {
	applyLevel(getPercentage());
	});

	init();
	};
	})(jQuery);

	$('#progress-bar').changingBar();

	var interval = setInterval(function() {
	var prog_bar = $('#progress-bar');
	var current_width = 100 * (parseInt(prog_bar.width(), 10) / parseInt(prog_bar.offsetParent().width(), 10));

	if(current_width >= 100) {
	clearInterval(interval);
	}

	current_width += 10;

	prog_bar.css('width', current_width + '%');
	prog_bar.trigger('changingBar.updated');
	}, 1000);