<style>  
  #boxezoze{width:0;height:16px;border-radius:5px;background:#5fbbde;}  
  #ezozebox{width:100px;height:16px;margin-right:3px;border-radius:5px;background:#ffffff;border:solid 1px #111111;}  
  #couezoze{float:left;color:#131313;font-size:15px;font-weight:bold;font-family:serif;margin:0 0 0 2px;}  
  </style>  
  <script type="text/javascript">  
  $(document).ready(function(){  
  $("#ezozecou").keyup(function(){  
  var box=$(this).val();  
  var main = box.length *100;  
  var value= (main / 50);  
  var count= 50 - box.length;  
  if(box.length <= 50){  
  $('#couezoze').html(count);  
  $('#boxezoze').animate({  
  "width": value+'%',},1);}  
  else{alert('Лимит исчерпан');}  
  return false;});});  
  </script>  
  <div id="ezozebox"><div id="boxezoze"><div id="couezoze">50</div></div></div><textarea id="ezozecou"></textarea>