Display a processing image while the submit button is clicked


I have successfully created a Web Application which takes inputs from the users and creates their accounts on different devices based on their location. This whole process takes around 60 to 90 seconds. The whole time the users think that nothing is happening and refreshes the page, so I want to display an processing image which shows that some kind of processing is happening and users wait. I haven't found a good example on google. If any one can provide me any or a link which shows I can achieve the same would be helpful.

If you are providing the jquery code then kindly provide the complete jquery code.

Thanks in advance.
Vipin KumarSr. Network EngineerAsked:
Who is Participating?
Vipin KumarConnect With a Mentor Sr. Network EngineerAuthor Commented:
Thanks Ray for your input, but I was able to resolve the same before I could read your comments.

@Edwin, your inputs were also not able to resolve my issue, the code that I implemented is provided below.

The below is jQuery code:
jQuery(function($) {
        opacity : 0.3,
        top     : 0,
        left    : 0,
        width   : $(window).width(),
        height  : $(window).height()

        top  : ($(window).height() / 3),
        left : ($(window).width() / 2 - 160)
    $('form#install').submit(function(e) {
        $('input[type=submit]', this).attr('disabled', 'disabled');
        $('#overlay, #loading').show();
        return true;

Open in new window

The below is the code that I need to put after the submit button:
Also add the id="install" to form tag
<div id="overlay"></div>
<div id="loading">
Please wait... while we add the MAC Address to the Database!!! It can take few minutes!!!

Open in new window

The below is the css code:
	display: none;
	position: fixed;
	background: #000;
	z-index: 2000; 

	padding: 10px 10px 10px 60px; 
	width: 400px; 
	height: 75px; 
	background: url('../images/ajax-loader.gif?1312925608') 10px 50% no-repeat white; 
	position: fixed; 
	display: none; 
	z-index: 3000; 

#loading h3{
	margin: 3px 0 0 0; 
	padding: 0; 

Open in new window


This is a generator for CSS generation of a "progress bar". Untested but the idea is to display as a <div> loads.


This example has a demo and shows all code.

Not sure what search terms you are using but you can find plenty of examples by searching for "progress bar" or "progress bar generator"
Vipin KumarSr. Network EngineerAuthor Commented:
These both examples are serving my purpose.

My purpose is after the user fills in the form and clicks the submit button, a processing image should come up showing that it is processing the request and user needs to wait. Once the processing is done, the processing image should disappear and the result page be visible.
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Edwin HofferTechnical ExpertCommented:
Hello leovipin2,

I have the code for what you are looking:

Use the tag just belo <body> tag

<script type="text/javascript">

function check()





Open in new window

Use the below tag in your submit button <input> code


Open in new window

Use this code below <input> submit button code, after the closing tag:

<div id="checking" style="display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #f4f4f4;z-index: 99;">
<div class="text" style="position: absolute;top: 45%;left: 0;height: 100%;width: 100%;font-size: 18px;text-align: center;">
<center><img src="load.gif" alt="Loading"></center>
Checking Please Wait! <Br>Meanwhile Please <b style="color: red;">BE ONLINE</b>

Open in new window

Hope this will help you. Also i have attached the load.gif image with this.


Ray PaseurCommented:
Here is how I've done it.

Assuming you're at a current level of PHP, there are some built-in functionalities that you might want to take a look at.
Vipin KumarSr. Network EngineerAuthor Commented:
I was able to find a solution before anyone else would provide a solution
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.