Simple Activity Indicator Script for AJAX & Non-AJAX Requests
By Aaron F. December 22nd, 2013
As you may have read recently in my Twitter feed here, we are getting back to blogging for the winter of 2011. Generally during the summer we are out having fun in the sun, and who really wants to be cooped up in an office when you could be out having a few beers?
Alright, enough with that, let's dive into the script we have prepared for todays article.
We are very excited to publish this script as it fills a need that we have struggled with for quite some time: Showing a loading/progress indicator when a page request is activated but one that doesn't necessarily rely on an AJAX request to work properly. The following script is designed to work with ANY request, mainly a-href style links, form buttons & onClick events will all trigger the loading indicator to display. Particularly handy with web applications!
Lines 11 - 17: This is the actual indicator itself. In our example, we have the loading indicator floating over the content. If you want your setup the same, these lines must be placed IMMEDIATELY following the opening body tag.
Lines 20 - 32: The actual working link examples of when the loading indicator is displayed. We have used standard A links, onClick events, and form submit requests.
Now that we have our index file configured, lets take a look at the CSS.
Line 3 - 4: Lets us float our indicator over the content of the actual page.
Line 5: Sets the container to stretch from edge to edge!
The next section of our CSS file, div.indicator, styles the actual div that is visually seen by our users. It has a background colour of black, is 65px high with 10px of padding on the top and bottom, and stretches the entire width of our page. You would change this section based on the appearance of the loading indicator itself.
Lines 3 - 9: Covers actually Ajax requests and tell the indicator itself to be shown & hidden when a request is made.
Lines 11 - 13: This references the first property of our CSS, display: none;. When a request is completed, it changes this property to NONE, which is our default.
Lines 15 - 17: This is where the magic happens. When a request is made, this tells our website to change the CSS property from display: none; to display: block;, which means our indicator is displayed!
Lines 19 - 25: Define what kind of HTML elements should trigger the display of our activity indicator. This is important as there may be certain request types you do not want to display the indicator with, such as form elements.
This is a fantastic, versatile & lightweight script. It can be easily integrated & customized to fit your existing site & brand and is particularly useful for web applications on both mobile & desktop applications.
Topics: Web Design & Development