We have recently began submitting forms via AJAX rather than the traditional full page load approach. It is working very well. The challenge now though is to make this approach as accessible as possible and set focus correctly when the returned markup is rendered. So much to consider! But rather than discuss accessibility here, I thought I’d offer for general consumption some AJAX activity loaders for use in your next wizz bang application.

Credit and thanks goes to our designer Jonathan Rez.

Bluey #003399

blue animated ajax spinner 1 blue animated ajax spinner blue animated ajax spinner 3 blue animated ajax spinner 4

Greenie #8CA47A

green animated ajax spinner 1 green animated ajax spinner green animated ajax spinner 3 green animated ajax spinner 4

Black #000000

black animated ajax spinner 1 black animated ajax spinner black animated ajax spinner 3 black animated ajax spinner 4

All loaders depicted above are available for download here: ajax-spinners-pack.zip

To re-create any of the above animated GIFs in the colour of your choice, follow these steps:

  • open the animated GIF in ImageReady
  • on each frame of the animation, add a colour overlay to the visible layer (blend mode = screen)
  • preview in a web browser and then ’save optimised’ to create your ajax activity loader

It is not the first time ajax activity loaders have been made available on the web for general use:
http://www.napyfab.com/ajax-indicators/
http://www.ajaxload.info/
http://mentalized.net/activity-indicators/