Animated progress/loading bar upon form submit - Javascript Animated progress/loading bar upon form submit - Javascript 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. HTML Code: <span style=”visibility:hidden;” id=”progress”/> Uploading in progress…<span> This is the javascript function that triggers and displays the image and the text. HTML Code: <script type="text/javascript"> 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. HTML Code: <input id=”contSubmit” onclick=”return loadSubmit()” src=”http://www.adminspoint.com/images/submitinfo_btn.jpg” type=”image” /> |
All times are GMT +5. The time now is 04:29 PM. |
Powered by vBulletin® Version 3.8.2
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.