February 23rd, 2009
Tutorial : Overlay a AJAX Spinner in the center of Web Page using Prototype
This tutorial is specially for beginners who are wondering how to place an AJAX Spinner. Its very simple guys. Just read below to find out.
To those people who have wondered how to show the spinner image + loading message when any ajax request is made and to hide the spinner image + loading message when the request is successfully completed, this tutorial will help you out in achieving it and also teaches you how to show this loading box in the center of the browser screen and grey out the background contents with cool fade effects.
Index :
- Page 1 : Introduction
- Page 2 : Required HTML/Javascript Code/CSS
- Page 3 : Complete Code of Demo
Pre-Requisites :
A little bit of CSS,HTML knowledge and know-how of Prototype, Scriptaculous.
Source/Demo :
May 26, 2010 at 8:03 am
how to change the timing of this spinner?
May 11, 2010 at 4:04 pm
does not work in IE6
December 17, 2009 at 2:20 pm
Nice example! Thanks!
April 25, 2009 at 9:36 pm
I will try to post my code again (with no tags)
style /* Loading box of width=height=100px with a spinner placed at the center */ #loading { [your code here] } / style script type="text/javascript" document.observe("dom:loaded", function() { [your code here] } / script div id="page" div id="update" center img src="short.png" /center /div div id="form" center a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/10', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Citrons_multisize_" border="1" src="/system/imagens/10/thumb/citrons_multisize_.jpg?1240515952" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/9', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Xdg" border="1" src="/system/imagens/9/thumb/xdg.jpg?1240515927" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/7', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3538" border="1" src="/system/imagens/7/thumb/CIMG3538.JPG?1240495758" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/6', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3540" border="1" src="/system/imagens/6/thumb/CIMG3540.JPG?1240460705" / a href="#" onclick = "new Ajax.Updater('update', '/mostra_foto_/5', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('433973460cdbc4fb77d4ae450290762d1ffbb983')}); return false;"> img alt="Cimg3541" border="1" src="/system/imagens/5/thumb/CIMG3541.JPG?1240460611" / / center / div / div div id="loading" Loading... / divApril 29, 2009 at 12:36 am
Hey,
I need more information regarding this.
I haven`t been able to understand what you are trying to do yet. there is a ajax updater on every link ?
April 29, 2009 at 12:55 am
Hello! Tnx for aswering.. my problem was, as I was testing localy the pictures were loading too fast unlike your demo that have a delay, so the fix for me was doing like this:
<code lang="js"> Ajax.Responders.register({ onCreate: function() { new Effect.Opacity('page', { from: 1.0, to: 0.5, duration: 0.6 }); new Effect.Appear('loading'); }, onComplete: function() { new Effect.Opacity('page', { from: 0.8, to: 1.0, duration: 0.1 }); $('loading').hide() new Effect.Fade('loading'); } }); </code>April 29, 2009 at 1:04 am
Ohh nice,
I hope you have that sorted out. I am extremely sorry for not attending your query earlier, was busy with the site design
Anyways, the code seems good, if you have any other queries lemme know
Regards
April 25, 2009 at 9:30 pm
Hi.. great blog layout impressive! And this loading stuff is pretty cool too
So I´m trying to use your code but it is kinda stucking the loading picture I like prototype, but still kinda noob if you have a idea please let me know, my code (short version):
[code]
/* Loading box of width=height=100px with a spinner placed at the center */
#loading {
[your code here]
}
document.observe("dom:loaded", function() {
[your code here]
}
Carregando...
[/code]
So.. after i click on a thumb the update div gets successfully updated, but until i click another thumb the loading box stay on the center