6 Favorite Loading AJAX Spinner Animation

On February 10, 2014, in HTML5, by James Liu

In this article, I will introduce 6 favorite ajax html spinner animations. You can download the best free AJAX spinner you like and use it in your own html website. Here are two types of animations available, gif animation and sprite sheet animation.

  • GIF animation is the most common animation used in html page, but you cannot control or interact with GIF animation.
  • Sprite sheet animation is a classic animation in game industry. You can control it by javascript and animate the loading progress as well. You can also create your own images and use them as loading spinner animation by replacing the image I used in sprite sheet animation. See HTML5 Ajax Loading Spinner

Continue reading »

Tagged with:  

4 Ways to Show Loading Spinner in HTML Page

On February 2, 2014, in HTML5, by James Liu

These days I am working on a new project, which will use Ajax to update the HTML pages. Because of the latency of internet, it may take 0.1s to 10s to response an Ajax calling and refreshing the HTML page. Hence, we have to show something like loading spinner duration this time. To give a great user experience, our designer provides several fancy loading spinners and some of these loading animation are even hard to be implemented by normal html and css. I have tried several ways to show these loading spinner in HTML page.

Continue reading »

Tagged with:  

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.
Continue reading »

Tagged with:  

Create CSS Animation in HTML5 Games

On September 19, 2012, in HTML5, by James Liu

New Update: HTML5 Animation for IE, Chrome and Firefox

There are several ways to create animation in HTML5 games. I am going to show you how to create HTML5 animation by CSS 3 in Chrome, Safari, Firefox and IE. To make the CSS animation, we need to get a sprite sheet animation png files, which you can:

  1. Create Sprite Sheet Animation From Flash
  2. Convert GIF Animation to Sprite Sheet Animation

Continue reading »

Tagged with:  

Using Sprite Sheet Animation in HTML5 Canvas

On July 5, 2012, in HTML5, by James Liu

In this post, we will talk about how to use sprite sheet animation png file and JavaScript file to make animation in the HTML5 canvas. Last time, we talked about how to generate the sprite sheet animation in flash. In that post, we are using Flash cs6 to generate a sprite sheet .png files as well as a JavaScript file which can be used directly in the HTML5 page to render the animation in canvas. Here, I will show you how to do it. First of all, let’s the animation I have made in HTML 5 canvas by sprite sheet and JavaScript. The amazing part is that it can work well in iPhone and iPad just because it is HTML5!

This is a sprite sheet animation in HTML5 canvas.

Continue reading »

Tagged with: