HTML PHP Progress Bar

Question

I have a website with a form that uses PHP to send the form data. Is there a way to create a progress bar on the page that looks like it is in action, so that people don\'t

Answer 1

Progress bars on web content are hard to get right because you don't know the total time the process will take and you don't have progress indicators from the process to let you know when to update your bar. You might be better off using a spinning loading image like the ones available on ajaxload.com.

You can make a hidden div cover the whole page and activate the div in your javascript when you're waiting.

In your html:

in the css:

#wait {
   position:fixed;
   top:50%;
   left:50%;
   background-color:#dbf4f7;
   background-image:url('/images/wait.gif'); // path to your wait image
   background-repeat:no-repeat;
   z-index:100; // so this shows over the rest of your content

   /* alpha settings for browsers */
   opacity: 0.9;
   filter: alpha(opacity=90);
   -moz-opacity: 0.9;
}

And then in your JavaScript:

...
$("#wait").show(); // when you want to show the wait image
...
$("#wait").hide(); // when your process is done or don't worry about it if the page is refreshing