Create jQuery Form with Progress bar and Input Limiter

Simple jQuery progress bar on form to show characters length with input limiter functionality. Demo available with downloads.

CSS for your form.

body{ margin:30px auto; width:75%; font: normal normal 12px/1.8em "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }
 #heading
{
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:56px;
 color:#CC0000;
 float:left;}
 a{
 font-size:24px}
#description
{
	width:297px; height:100px;
	font-family:Arial, Helvetica, sans-serif;

	color:#000000;
	font-size:15px;
}
#filling_tube_input
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube_subject
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube
{
	background-color:red;
	width:0px;
	height:6px;
}
.label{
       width:100px;
}
input{outline: none; margin-bottom:1px;/* Get rid of the 'glow' effect in WebKit, optional */}
#container
{
height:6px; background-color:#FFFFFF; width:299px; border:solid 1px #000; margin-right:3px;
}
#container_input
{
height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #999; margin-right:3px;
}
#container_subject
{
height:6px; background-color:#FFFFFF; width:201px; border:solid 1px #000; margin-right:3px;
}

jQuery file with input limiter plugin.

Downlad Input Limiter Plugin

javascript to call input limiter function.

$(function() {
	$('#description').inputlimiter({limit: 200});
    $('#name').inputlimiter({limit: 35});
    $('#subject').inputlimiter({limit: 100});
});

Code to perform progress bar action

$(document).ready(function()
{
	$("#description").keyup(function()
	{
		var box=$(this).val();
		var fill = box.length;
		var main = box.length *100;
		if(fill <= 200)
		{
			fill = fill/2;
			var round_val = Math.round(fill);
			$('#filling_tube').animate(
			{
			"width": fill+'%',
			}, 1);
		}

	});
    $("#name").keyup(function()
	{
		var box=$(this).val();
		var fill2 = box.length;
		var main = box.length *100;
        if(fill2 <= 40)
		{
            fill2 = fill2*3;
            fill2 = fill2-5;
            $('#filling_tube_input').animate(
			{
			"width": fill2+'%',
			}, 1);
		}

  	});
   $("#subject").keyup(function()
	{
		var box=$(this).val();
		var fill3 = box.length;
		var main = box.length *100;
        if(fill3 <= 100)
		{
			$('#filling_tube_subject').animate(
			{
			"width": fill3+'%',
			}, 1);
		}

  	});

});

HTML

Name

Email

Description