29Jun
Animated progress/loading bar upon form submit - Javascript
Posted by admin as Javascript/AJAX
This piece of code displays an animated in progress bar after clicking the form submit.This is a good idea when your form is requiring large time when submitting information like file uploads.This will give the users the idea that the form action does not stuck up and is currently in progress.It does not require ajax,just javascript and some css and you can produce this animation.
First, you can download some cool,customizable and free loading icons at http://www.ajaxload.info. Then for the code:
Initially we will set the text and the image visibility to hidden.
You can put this code maybe beside your submit button so after clicking it the user can easily see the animation.
<p style=”visibility:hidden;” id=”progress”/><img id=”progress_image” style=”padding-left:5px;padding-top:5px;” src=”images/ajax-loader.gif” alt=”"> Uploading in progress…<p>
This is the javascript function that triggers and displays the image and the text.
function loadSubmit() {
ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(”ProgressImage.src = ProgressImage.src”,100);
return true;}
The setTimeout function is for IE 6 and 7 users.This is because IE will stop any animated gifs from animating when the form is submitted.So we will display the image first(the animated one) then return the function to true.When the function returns to true, that is the time the form will submit,thus the users will see the loading icon first before the form submits.
Then trigger the function upon clicking your submit button.
<input class=”contSubmit” onclick=”return loadSubmit()” src=”images/submitinfo_btn.jpg” type=”image” />
Basically,that’s it.Just change the path of the images to where your images resides.Feel free to email me if you have any questions/suggestions.Thanks!
- Tags: Animated loading bar, Animated loading bar javascript, Animated progress bar, Animated progress bar javascript, form submit animation, form submit animation javascript, form submit loading animation, form submit loading animation javascript, form submit progress bar animation, form submit progress bar animation javascript
37 Responses to Animated progress/loading bar upon form submit - Javascript
tobyb
July 8th, 2009 at 4:47 pm
Thanks for this, the basic idea works, but you need to change a few things in your javascript to make this work:
function loadSubmit() {
var ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
return true;
}
very minor changes, but they should fix any errors
admin
July 9th, 2009 at 7:33 am
my function works in me,maybe some addition will enhance it just like you did.Thanks for the suggestion toby!
tomm
August 24th, 2009 at 4:51 am
Hi, After making some changes this works fine in Chrome / Firefox but no luck in ie even upping the time-out. Any suggestions?
Thanks. T
darren
September 8th, 2009 at 5:03 pm
Just a quick note:
Your paragraph is an invalid element, you have closed it with />…
You need to remove the “/” so that it is closed properly with the element.
admin
September 8th, 2009 at 10:05 pm
edited out.Thanks Darren! I didn’t see that
Momo
September 24th, 2009 at 11:46 pm
Thanks for making the above code available. I am trying to install the animated progress bar but am having difficulty.
1. The image loads at startup. It does not wait for button submit.
2. I want to use button submit instead of form submit. Can you pls help.
3. What I am working on is - I would like to launch an exe (install) file from inside an hta window. This is working fine, the only problem is the loading gif image loads up when the page is launched. I want image to only launch after
4. Where do I put the javascript code? In the head or after the submit form/button?
Thanks.
admin
September 25th, 2009 at 12:46 am
Answers to your questions:
1.the image must be in a tag(in my example a <p> tag) that is set to be hidden on page load.
2.it can be on a submit button like this one:
<input type=”button” onclick=”return loadSubmit()”/>
3.you can put the javascript code anywhere you like,just enclose it in a
<script type=”text/javascript”> </script> tag.
Just place it in the head so you can easily locate it.
I hope I answer your questions correctly.Thanks!
Momo
September 25th, 2009 at 3:49 am
Thank you for your quick reply. I will try that!
Momo
September 25th, 2009 at 4:46 am
I want to use a css class image for the button because it matches the other buttons on the page. Can you please advise what code? My button is called
admin
September 25th, 2009 at 11:59 am
I have replied to your concern via email.Please check it out.
David
November 10th, 2009 at 8:59 pm
Great little script - very helpful - thank you very much!
Bryan Willman
December 4th, 2009 at 4:06 am
Thanks, something about that ‘return true;’ fixed a problem I was having where the gif would not animate.
Dong
January 7th, 2010 at 9:02 pm
I’m having a problem with the SUBMIT BUTTON.
This is the submit button code I modified:
input class=”contSubmit” shows a text field, not a button.
Please help
Dong
January 7th, 2010 at 9:08 pm
I fixed it… the problem was with the ‘ and “, which are italics when I copied in my editor. thanks.
Warren
January 7th, 2010 at 11:01 pm
I am loading data from 5 text files into a mysql database and I am trying to setup a loading bar to indicate the progress as they are loaded.
Found your script and was wondering how to use this or another script to show the loader.
Thanks
Warren
admin
January 8th, 2010 at 12:10 pm
if you want to show the progress of the percent of the data beinXg loaded or processed,maybe you can use some AJAX for it.
vinoth
February 10th, 2010 at 10:50 am
Hi ,bro its realy workin well i.E thanks alot.
Silver
August 26th, 2010 at 11:54 pm
Hi,
Good work! I succesfully used your example in ASP.NET. I modified it a bit, because I wanted to use a progress image on multiple controls all over the form.
I post the solution over here so others shouldn’t start inventing
On a page:
function loadSubmit(Panel, ProgressImage) {
Panel.style.visibility = “visible”;
setTimeout(function() { ProgressImage.src = ProgressImage.src }, 100);
return true;
}
On a control or a page:
In code behind:
override protected void OnInit(EventArgs e)
{
panelProgress.Style.Add(”visibility”, “hidden”);
btnFinish.OnClientClick += string.Format(”return loadSubmit({0}, {1})”, panelProgress.ClientID, imageProgress.ClientID);
}
Cheers!
admin
August 28th, 2010 at 8:37 am
Thanks Silver for your solution and suggestion! Very much appreciated. Thanks!
Giancarlo
December 28th, 2010 at 12:32 am
Hello, great script, i got it working… I had to type everything manually. as copy / paste didn’t work correctly. Thanks.
Questions, I am loading the query results on an iframe. works perfect. Only thing is that the animated gif continues after the query results are returned. Is there a way to timeout the gif animation based on the loading time. I want the gif to stop animating , or to hide again, once the results are in. Appreciate any feedback. Thanks.
admin
January 4th, 2011 at 6:48 pm
hello Gian,
I think the better way for your concern is put the query results inside the page(via AJAX), then when the request is completed, that’s when you hide the gif animation. A little Jquery can do the trick
sino
January 30th, 2011 at 5:33 am
i dont do much commenting, but i needed to say thanks for this little script, makes a big difference on my site.
nik
April 15th, 2011 at 7:57 am
Its not working, please check throughly before putting on blog.
admin
April 15th, 2011 at 10:38 am
You check your work first before complaining Nik, see the comments, take note on how many said this little script is working or not.
bj pearce
April 28th, 2011 at 7:38 am
i recently upgraded from XP to Windows 7 - 64 bit. now when i create a new animated gif for a Publisher webpage,
the animations no longer work in any browser. (the gifs have not been resized.) even if i take an older animated
gif and add it to the page, they don’t work. yet when i open a pre-existing webpage that already had animated gifs
on it, those gifs DO work. what is going on? i have tried everything including a restore to an earlier date and
making sure the brower settings allow animation to be shown. is it my last windows update that did this to me? i am
running MSIE 8.0 and Firefox browsers and i do NOT have Zone Alarm on my pc. i do not want to have to go back and
install some special html code to each page as i have several thousand pages to redo. i just want to know what is
causing it and how i can fix it. u can view the page at http://jsmagic.net/test. the only animations working on
that page are ones that were already on the page. the new ones i added DO NOT work no matter what i try. please
respond to jan@jsmagic.net
Gagan
June 14th, 2011 at 7:09 pm
Loved this little piece of magic ! nice work
Saqlain Raza
July 26th, 2011 at 12:32 pm
Great,
This one is working Exactly right.so u can use it very Easily.No problem at all.thanks for sharing this Knowledge.
here is complete code for those who’s are very new.now you just have to put image path correctly.just that only other than it is working well.
/**********************************************************/
Ajax Loading Effect
function loadSubmit() {
ProgressImage = document.getElementById(’progress_image’);
document.getElementById(”progress”).style.visibility = “visible”;
setTimeout(”ProgressImage.src = ProgressImage.src”,1222000);
return true;
}
Uploading in progress…
/**********************************************************/
admin
July 27th, 2011 at 9:25 am
Thanks for the code suggestion Saqlain!
Eugene
August 11th, 2011 at 1:27 pm
Thanks a lot for good idea. I tryed this option by IE7 only but it works fine. Only I made it a little shorter:
onclientclick=”document.getElementById(’spinner’).style.visibility = ‘visible’;
setTimeout(’document.getElementById("spinner").src = document.getElementById("spinner").src’,100);
return true;” />
where:
Skip M. Cherniss
August 16th, 2011 at 4:32 am
Elegant and easy to implement. Thank you for the knowledge.
Leroy
September 10th, 2011 at 3:44 pm
Please I need to know what part of my html code I’ll put the animation image downloaded from your site and the javascript code.Is there anything else I need to make this work?Please reply soon
admin
September 12th, 2011 at 8:27 am
put the image anywhere in your directory and target the image src to where you reside the image. You can put the code maybe beside your submit button so after clicking it the user can easily see the animation. You can put the javascript code anywhere but most preferably in the head section. Kindly read the tutorial, all info is there
Dianne
October 4th, 2011 at 4:39 pm
Hi. I need some help here. Sorry I’m just new here and I need this to work ASAP. So anyway, I have this submit code:
I put the javascript function in the . You said I should put this could beside my submit code right? Uploading in progress…
I already changed the image path, btw. So my question is about this last line code:
Should I merge this with my submit code(the one I mentioned)? And which image is this src=”images/submitinfo_btn.jpg” referring to? Thank you so much.
Kevin
October 28th, 2011 at 5:03 am
Thanks for this great script and tutorial! I’ve been pulling my hair out for 2 days trying to find a good and SIMPLE script like this. I just had to make a couple of minor changes - I used tobyd’s modified javascript (the first comment), and I had to re-type the quotes because they were messing up the code for some reason…but it works perfectly thanks!
EA Wade
November 1st, 2011 at 2:53 am
Thank u! This works very well and it is far less complicated than other examples!
Supratim
November 2nd, 2011 at 9:51 pm
Help Me!!! I have done a .php webpage that contains a search feature(retrieval data from SQL DB).Now I want to modify the page with Loader gif.While Filling the search box & Pressing the submit buttom..the loader image will display…then the query result….
anup
January 10th, 2012 at 5:04 pm
thanx it helped me alot…