input с прогрессбаром и оставшимся количеством символов

HTML:

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3 well">

      <div class="progress" id="barbox">
        <div id="bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="156">
          <span id="count">156</span>
        </div>
      </div>
      <input id="contentbox" class="form-control" />
    </div>
  </div>
</div>

CSS:

body {
  background: #333;
  padding-top: 50px;
}
#count {
  text-shadow: 0 0 1px #000;
}

JS:

$(document).ready(function() {
  $("#contentbox").keyup(function() {
    var box = $(this).val();
    var main = box.length * 100;
    var value = main / 145;
    var count = 145 - box.length;
    if (box.length <= 145) {
      $("#count").html(count);
      $("#bar").animate(
        {
          width: value + "%"
        },
        1
      );
    } else {
      $("#bar").attr({
        class: "progress-bar progress-bar-danger progress-bar-striped"
      });
    }
    return false;
  });
});

Код