Fun CSS Loading Animations

Today, I'd like to share a little experiment I did playing around with the cutting edge CSS animation to create a gif-like AJAX loading icon purely from CSS. The idea here is to try to manipulate HTML objects using only CSS and minimal HTML markup so we do not have to rely on gif images or JS.

Disclaimer: The purpose of this post is to show you the possibilities of CSS. The content may or may not be practical to use in real life. The demo provided works best on Chrome, and partially works on Firefox and Safari.

Fun CSS Loading Animations


Pure CSS Ajax Loader

The advantages of using CSS animation over GIF/JS

  • It gave me more control of my animation. I found that it was much more convenient to edit elements and change animation speed via CSS rather than going through the Photoshop process.
  • CSS animations use GPU acceleration which is much faster than animating with JS and much lighter in terms of size when compare to gif images.
  • CSS allows the users to be able to interact with the animation as the developer intended. For gif images, there is no interaction between the users and the animation.

On the other hand, there are some drawbacks as well

  • CSS animation is not widely supported yet. The browsers that supports it are still buggy as well. For example, in our demo, some animations don't work on Safari, but work well on Chrome.

In order to improve the performance, I’ve decided to keep the HTML markup to a minimum to speed up the initial page load. I was able to accomplished this by using pseudo elements, :before and :after. With pseudo elements, for every element on the page, you get 2 free ones and you can manipulate these elements as they are real elements. This allows me to easily create 3 animated elements using one HTML tag. Another great thing about keeping the markup to a minimum is that all the work is done by CSS and you can easily edit any changes by just adjusting numbers in the CSS file.

In the demo, there will be 5 different CSS AJAX loading animations to show you how capable CSS animations have become. Feel free to experiment on these as much as you want.

Conclusion

I hope you have enjoyed my little experiment and if you have some cool animation techniques to show us, feel free to share them in the comments below.