<style type="text/css">  
.progress{  
width: 1px;  
height: 14px;  
overflow: hidden;  
background-color: navy;  
padding: 0px;  
opacity:0.5;  
}  
</style>  

<script type="text/JavaScript">  
function textCounter(field,counter,maxlimit,linecounter) {  
  // text width//  
  var fieldWidth = parseInt(field.offsetWidth);  
  var charcnt = field.value.length;  

  // trim the extra text  
  if (charcnt > maxlimit) {  
  field.value = field.value.substring(0, maxlimit);  
  }  

  else {  
  // progress bar percentage  
  var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;  
  document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";  
  document.getElementById(counter).innerHTML= +percentage+"%"  
  // color correction on style from CCFFF -> CC0000  
  setcolor(document.getElementById(counter),percentage,"background-color");  
  }  
}  

function setcolor(obj,percentage,prop){  
  obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";  
}  

</script>

$_MESSAGE$

  
<textarea cols="80" rows="10" id="message" name="message" class="postTextFl" onKeyDown="textCounter(this,'progressbar1',5000)" onKeyUp="textCounter(this,'progressbar1',5000)" onFocus="textCounter(this,'progressbar1',5000)" ></textarea>  
  
$_MESSAGE$