Fun CSS Loading Animations

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

[tut demo=”https://onextrapixel.com/examples/pure-css-ajax-loader/” download=”https://onextrapixel.com/examples/pure-css-ajax-loader/pure-css-ajax-loader.zip”]

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.

[tut demo=”https://onextrapixel.com/examples/pure-css-ajax-loader/” download=”https://onextrapixel.com/examples/pure-css-ajax-loader/pure-css-ajax-loader.zip”]

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.