Progress bar using jQuery

Code
<div class="bar-container">
  <div class="bar">
    <div class="bar-inner" id="range" data-value="90%"></div>
  </div>
  <div class="bar">
    <div class="bar-inner" id="" data-value="50%"></div>
  </div>
  <div class="bar">
    <div class="bar-inner" id="" data-value="60%"></div>
  </div>
  <div class="bar">
    <div class="bar-inner" id="" data-value="75%"></div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script>
$(document).ready(function(){
$('.bar-container').each(function(){
    $(this).find('.bar-inner').each(function(){
        var ht = $(this).attr('data-value');
      $(this).height(ht);
    });
});
 })

</script>
<style>
.bar-container {
    background: #ccc none repeat scroll 0 0;
    clear: both;padding:20px;
    display: inline-block; 
}
.bar {
    background: orange none repeat scroll 0 0;
    height: 130px;
    margin: 0 15px;float:left;
    position: relative;
    width: 20px;
}
.bar-inner {
    background: red none repeat scroll 0 0;
    bottom: 0;
    display: block;
    
    position: absolute;
    text-indent: -999px;
    width: 100%;
}
</style>