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. Show Ajax Loading Spinner
Read more

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!

Read more

In the past 10 years, Gif and flash are the best format to show the animations on web. Gif can represent the simple animations with a very small size. Flash support more complicated animation with logic control. We can find hundreds of thousands of animation resources in these two file formats on the internet. However, the web technologies keep changing from time to time. The old web technology standards can not meet the current needs of our daily internet activities. HTML 5 was standardized in 1997 but it got focused till Google engaged in web browser development and Apple iPhone, iPad took the browser market share.

Now, HTML5 is encouraged to be the next HTML standard. Animations on web pages are no longer a big problems for current browser technologies. Therefore, more and more browsers refuse to support the flash player plugin to improve their security and performance. In html5 website, we can use Sprite Sheet technology which is traditional 2D game animation technology in the past 20 years. To reuse our GIF and Flash animation resources, we can convert them to Sprite sheet format and do the sprite sheet animation by Javascript in HTML 5.
Read more