Next, we'd like to show the site visitor that something is happening as soon as they click on the link in the navigation. Remember that if the response from the server is slow, the site visitor can't see that anything is happening. Even though the browser is hard at work fetching the content for the new page, there's no indication to the site visitor that anything is happening. Let's add in a little animation to make it obvious that something's happening on our page.
Loading animations can take many different forms: spinning daisies, animated progress bars, blinking dots—anything that will communicate that there's an action in progress will help make your site feel snappier and more responsive for your site visitors.
First, head over to http://ajaxload.info to create and download a loading animation of your choice.
Select the type, background color, and foreground color in the Generator box, then click on the Generate It! button.
You'll see a preview...