[jQuery] Elegant Loading Indicator

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2995" name=GENERATOR></HEAD>
<BODY>
<DIV><SPAN class=156572622-12122006><FONT face=Arial color=#0000ff
size=2>Yep...</FONT></SPAN></DIV>
<DIV><SPAN class=156572622-12122006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><FONT size=2></FONT> </DIV>
<BLOCKQUOTE>
<DIV class=OutlookMessageHeader dir=ltr align=left><FONT face=Tahoma
size=2>-----Original Message-----<BR><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com]<B>On Behalf Of </B>Rich
Manalang<BR><B>Sent:</B> Tuesday, December 12, 2006 4:21 PM<BR><B>To:</B>
jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] Elegant Loading
Indicator<BR><BR></FONT></DIV>that's fine too... but you still need to trigger
the loading indicator to show up when an ajax request goes out.<BR><BR>
<DIV><SPAN class=gmail_quote>On 12/12/06, <B class=gmail_sendername>Andy
Matthews</B> <<A href="mailto:andy@icglink.com"> andy@icglink.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Why not just
create the style for the loading bar in your stylesheet? Then you don't
have to do that in jQuery.</FONT></SPAN></DIV><SPAN class=q>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN></SPAN> </DIV>
<P><FONT size=2></FONT> </P></SPAN>
<DIV><SPAN class=e id=q_10f78bc3d36f5870_2>
<BLOCKQUOTE>
<DIV dir=ltr align=left><FONT face=Tahoma size=2>-----Original
Message-----<BR><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com </A>[mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A>]<B>On Behalf Of </B>Rich
Manalang<BR><B>Sent:</B> Tuesday, December 12, 2006 3:59 PM<BR><B>To:</B>
jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] Elegant Loading
Indicator<BR><BR></FONT></DIV>I do love the simplicity of this... although
I had to modify it for my own purposes :-)<BR><BR>// Adds a wait indicator
to any ajax requests<BR>$(document.body).ajaxStart(function()
{<BR>   $(document.body).append('<div
id="loading">Loading...</div>'); <BR>
$('#loading').css({padding:"2px", fontSize:"9pt", position:"fixed",
top:"0", right:"0", background:"red",
color:"white"});<BR>}).ajaxStop(function() { <BR>
$('#loading').remove();<BR>});<BR><BR>Rich<BR><BR>
<DIV><SPAN class=gmail_quote>On 12/8/06, <B class=gmail_sendername>Chris
W. Parker</B> <<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:cparker@swatgear.com"
target=_blank>cparker@swatgear.com</A>> wrote: </SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">On
Friday, December 08, 2006 2:13 AM Barry Nauta <> said:<BR><BR>>
For me, the wait cursor indicates an upcoming page refresh (oldschool
<BR>> web?), hence I will probably wait for this cursor to disappear
before<BR>> doing anything else. The beauty of Ajax (one of) IMHO is
that you can<BR>> continue to work on a page...<BR><BR>Good point. In
this case then the author can use the arrow+hour glass <BR>icon. For
sure this is available on Windows but I'm not sure about Linux<BR>and
OSX.<BR><BR><BR>Chris.<BR><BR>_______________________________________________<BR>jQuery
mailing list<BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com"
target=_blank>discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></SPAN></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
andy

[jQuery] Elegant Loading Indicator

[jQuery] Elegant Loading Indicator

Topic Participants

andy