check out my new blog at

Thursday, December 20, 2007

Pragmatic ajax activity indicator with prototype and css


Put this javascript snipped somewhere into your html or as javascript inclusion:

onCreate: function() {
if($$('body').first() && Ajax.activeRequestCount > 0)
onComplete: function() {
if($$('body.busy') && Ajax.activeRequestCount == 0)

Previous chunk adds a body css class name to the html's body element everytime the Ajax.Request is made to the server. Pretty simple, eh?

Step 2

Define such css styles somewhere:

body.busy * {
cursor: progress !important;

This css rule says to change mouse cursor to convey us to wait a bit...

Step 3


Labels: , , , ,


Post a Comment

<< Home