Be the first to write a review
Creating an AJAX Loading Spinner
Adding a lightweight loading spinner will allow our visitors to get visual feedback that the page is doing something while content is loaded.
When we’re working on our AJAX widgets locally or on a development server it’s easy to forget that the data we are getting takes time to be requested, returned and processed. This can, in some situations, lead to unresponsive, blank or otherwise boring pages that our visitors must look at while the content is generated. In this tutorial we’re going to look at adding a lightweight loading spinner so that our visitors get visual feedback that the page is doing something while content is loaded.
We’ll be using jQuery to make AJAX requests and display the spinner in an attractive popup. We’ll just load some dummy content in a container and will need to delay the response slightly so that we get to see the spinner. We’ll be working mainly with jQuery-flavoured JavaScript, with a little HTML and CSS, as well as some basic PHP and JSON.
Dan Wellman
Dan Wellman is an author and web developer based in the UK. Dan has written three books so far; the latest, jQuery UI 1.7: The User Interface Library for jQuery, was released at the end of 2009.
Dan has been writing web development tutorials for over 5 years and works by day for a local digital media agency in his home town of Southampton.