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.
GIF Animation for HTML Loading Spinner
GIF animation is the most common animation format which works in all browsers from desktop to mobile and tablets. Hence, it is the best way to implement the loading spinner animation in HTML page. Another advantage of GIF loading spinners are small in file size. So it will take a very less time to load on page. The only problem of GIF loading spinner is it is very hard to make more complex animations, and you cannot control the animation. For example, you want to use animation to show the loading progress, GIF cannot handle it. The above 6 loading spinner are gif animations. You can find the last two animations are not as good as others. Therefore, if your loading spinner animation is very simple, I recommend you to choose this way.
Flash Loading Spinner Animation
If you want to animate the loading progress or you have a very nice loading spinner, Flash is a good choice. Flash provides a full control for you to interact with animation. It also provides a great animation effect with sound and video. The only problem is that require flash player plugin in your browser. Most of the mobile browser doesn’t support this type of animation.
Sprite Sheet Animation in HTML Javascript and CSS
If you want to create a loading spinner animation for your html page and control the loading progress in animation, then sprite sheet animation is a good solution. Sprite sheet animation is a classical animation in game industry. Now it comes to HTML as well. We can use Javascript and css to create a sprite sheet animation. Sprite sheet animation in HTML has the advantage of GIF animation and Flash animation. We can just javascript to control the animation progress. Meanwhile, it doesn’t require any plugin to play. Sprite sheet animation is the best choice for all browsers from different platform, including desktop and mobile. Because it uses the basic function of html, javascript and css, it is compatible with almost all the browsers in the market.
Related Posts:
Create CSS Animation in HTML5 Games
HTML5 Ajax Loading Spinner
HTML Canvas Animation
Canvas animation is a new coming with HTML5. We can use this html5 features to do lots of animation in 2D. Because most modern browsers support html5 technology, canvas animation becomes one widely used technologies in HTML. Different from sprite sheet animation, it is only supported in the latest browsers. If you have any questions or want to know more about HTML5 canvas animation, you can leave a reply below.
