Cool jQuery Progress Indicator

One of my projects was to develop a automated employee automation application which will use jQuery. Today I am going to show you how you can create a cool progress indicator to tell your end user that something is going on behind the back of an action. Below is an image of the progress indicator that slides from the top to the middle of the screen then displays the processing message then slides up and disappears once done.

Processing Image

The Code

<html>
<head>
	<script src="scripts/jquery.js"></script>
	<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j("#btnSubmit").click(function(){
				$j("#messenger").css("width", document.body.offsetWidth);
        			$j("#messenger").css("height", document.body.offsetHeight);
        			$j("#messenger").css("opacity",.7);
        			$j("#messenger").fadeIn('fast');
				$j("#messengermessage").css("width", document.body.offsetWidth);
				$j("#messengermessage").animate({opacity: "1", top: "+=" + addToAnimation, height: "100", width: document.body.offsetWidth}, "slow")
        			var myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">saving attachments...</font></div>'
        			$j("#messengermessage").html("");
        			$j("#messengermessage").html(myhtml);
				$j.post('handlers/EmployeeRequisition.ashx', {
					requestedBy : GetRequestedBy(),
                    			requestor : GetRequestor(),
                    			requisitionDate : $j("#dtpRequisitionDate").val()
				},
                		function(data) {
					myhtml = '<div style="float:left; position:relative; padding-top:30px;"><img src="images/processing.gif" /></div><div style="float:left; position:relative; padding-top:40px;"><font style="font-family:verdana; font-size:14px;color:#000000; font-weight:bold;">form saved... </font></div>'
                    			$j("#messengermessage").html("");
                    			$j("#messengermessage").html(myhtml);
                    			$j("#messengermessage").animate({opacity: "1"},2000, function(res) {
                        		var subtractThis = document.body.offsetHeight - 500;
                        		$j("#messengermessage").animate({opacity: "0", top: "-=" + subtractThis, height: "0", width: document.body.offsetWidth}, "slow")
                        	        $j("#messenger").fadeOut('fast');
                    		});
			});
		});
	</script>
</head>
<body style="font-family: Verdana; margin: 0px;">
    <form id="frmHR001" runat="server">
	<div>
		............

	</div>
	<div>

		<input type="button" id="btnSubmit" value="submit" />
	</div>
	<div id="messenger" style="float: none; position: absolute; width: 100%; height: 100%;
            background-color: #000000; display: none; left: 0; top: 0;">
        </div>
        <div id="messengermessage" style="float: none; position: absolute; width: 100%; height: 100px;
            background-color: #ffffff; display: none; left: 0; top: 0; text-align: center;">
            <div style="float: left; position: relative; padding-top: 30px;">
                <img src="images/processing.gif" />
            </div>
            <div style="float: left; position: relative; padding-top: 40px;">
                <font style="font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold;">
                    processing...</font>
            </div>
        </div> 
    </form>
</body>
</html>

The code is quite long but then again it achieves our purpose. Lets walk through the code and see how it happened.

1. Our Html
The fading in gray background which is initially hidden through the display:none; css attribute.

<div id="messenger" style="float: none; position: absolute; width: 100%; height: 100%;
            background-color: #000000; display: none; left: 0; top: 0;">
        </div> 

The white progress indicator with the processing image.

<div id="messengermessage" style="float: none; position: absolute; width: 100%; height: 100px;
            background-color: #ffffff; display: none; left: 0; top: 0; text-align: center;">
            <div style="float: left; position: relative; padding-top: 30px;">
                <img src="images/processing.gif" />
            </div>
            <div style="float: left; position: relative; padding-top: 40px;">
                <font style="font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold;">
                    saving form...</font>
            </div>
        </div> 

The submit button which triggers the posting of data via our handler

<input type="button" id="btnSubmit" value="submit" />

2. The jQuery code the does it all.

First we reference our jquery library.

<script src="scripts/jquery.js"></script>

Second we initiate our jQuery code;

<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
                });
</script>

Then we assign an click event to our submit button

<script type="text/javascript" >
		var $j = jQuery.noConflict();
		$j(document).ready(function(){
			$j("#btnSubmit").click(function(){
                        });
		});
	</script>

And inside our button the gray slightly transparent background occupies the whole width of the window

$j("#messenger").css("width", document.body.offsetWidth);

then occupies the whole height of the screen

$j("#messenger").css("height", document.body.offsetHeight);

we then set its opacity

$j("#messenger").css("opacity",.7);

and then here is the fading-in animation of the gray background

$j("#messenger").fadeIn('fast');

we then tell the white sliding progress indicator to occupy the whole width of the window

$j("#messengermessage").css("width", document.body.offsetWidth);

and finally the code that makes it slide saying that our form is currently doing something

$j("#messengermessage").animate({opacity: "1", top: "+=" + addToAnimation, height: "100", width: document.body.offsetWidth}, "slow")

how does it slide up after the posting of data? just do the reverse of the latter.

$j("#messengermessage").animate({opacity: "1"},2000, function(res) {
var subtractThis = document.body.offsetHeight - 500;
$j("#messengermessage").animate({opacity: "0", top: "-=" + subtractThis, height: "0", width: document.body.offsetWidth}, "slow")

and lastly we tell the gray background to fadeout since we are done with the processing

$j("#messenger").fadeOut('fast');

Thats it. Of course there are many cool progress indicators but this one is simple and easy to understand yet nice looking. By the way there is one great javascript library asside from jQuery that you would really love. Find out how, this is there site: http://www.sencha.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: