HTML5 Ajax Loading Spinner

On January 25, 2014, in HTML5, by James Liu

I will create an Ajax loading spinner in this example. Currently, lots of websites are designed for iphone, ipad and other android based tablets. Therefore, most of them avoid to using flash technology and start to use html5 instead. To improve the user experience, a loading spinner is necessary when there are some ajax calling.

In this example, I will show you how to create an HTML ajax loading spinner. I will use pure html, javascript and css to implement the loading progress animation. HTML5 css animation is not a new topic. I have talked about it in the old post Create CSS Animation in HTML5 Games. But in that html5 css animation example, I am using too much fancy new css technology which is not widely implemented in most of the browsers. After several testing, I find it only works in Chrome. So I think I should create a new htm animation example, which can work in IE, Firefox and Chrome at least.

This time, I will only use normal html, javascript and css to create the loading spinner animation, so that it will be compatible with IE, Firefox and chrome and any other old browsers. To create an animation in html is not very complicated. I am using sprite sheet animation, which is a very classical animation method used in games. A sprite sheet is a single png image containing all the frames of an animation. One of the advantages of this type animation is that we can use it android animation, ios animation and html animation. You can check sprite sheet animation in IOS programming.

Firstly, to create a sprite sheet animation, we need to create a sprite sheet image, which contains all animation frames. My sprite sheet image is a transparent png file with 5 frames. I am add black background to show you the frames.

preloadericon-with-black-background

preloadericon-with-black-background

Secondly, we will create a html page and put a div inside. It will be the holder of sprite sheet animation frame. We are using css to set the div size as animation frame size and apply the sprite sheet image as the div background image.

<div class="spinner-bg">
	<div id="spinner">
	</div>
</div>
.spinner-bg
{
	width: 44px;
	height: 41px;
	background:#000000;
}

#spinner
{
	width: 44px;
	height: 41px;
	background:url(./preloadericon.png) no-repeat;
}

Thirdly, we will using javascript code to create a timer to change the div background image.


var currentbgx = 0;
var circle = document.getElementById(“spinner”);
var circleTimer = setInterval(playAnimation, 100);

function playAnimation() {
if (circle != null) {
circle.style.backgroundPosition = currentbgx + “px 0”;
}

currentbgx -= 44; //one frame width, there are 5 frame
//start from 0, end at 176, it depends on the png frame length
if (currentbgx < -176) { currentbgx = 0; } } [/java] Then, we can talk about how to implement an loading spinner for Ajax calling. After we created the html sprite sheet animation successfully, it becomes to be much simple. Here I will put one button to make Ajax calling and show the loading spinner. And I will create a timer to simulate the return of Ajax calling and dismiss the loading spinner. Please click the button below to see the html ajax loading spinner.

Download HTML Ajax Loading Spinner Example Source Code

Get the HTML5 Ajax Loading Spinner example source code under $0.99. You can use all source code wherever you want without any constraint.

Tagged with:  

Leave a Reply

Premium WordPress Themes

Weboy