Home > General > Loading animations using pure CSS

Loading animations using pure CSS

With the advent of CSS animations, it’s quite easy to create a loading animation using just CSS. Loading animations have traditionally been done using an animated gif. Using CSS animations only requires a single div element and a few lines of CSS:

#loading-image
{
	width: 25px;
	height: 25px;
	border-width: 8px;
	border-style: solid;
	border-color: #000;
	border-right-color: transparent;
	border-radius: 50%;
	animation-name: loading;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes loading
{
	0% { transform: rotate(0deg); }
	100%   { transform: rotate(360deg); }
}

Here is the result in JSFiddle.

I recently participated in a code review for a website and instead of using animated images, a developer decided to use CSS animations. While this is neat, I believe it’s a mistake to use this on a customer facing website. Perhaps my opinion will change in five years, but there are still too many people using older browsers that don’t support CSS animations.

Using pure CSS does have some merit. For example, a page might load a tiny bit faster because there is one less image it has to download, which reduces the number of http requests and the size of the page. You can also use LESS to dynamically change the animation color to match customer defined themes, background colors, etc….

While there are some reasons to use CSS animations, there are more reasons not to. The most important reason against using CSS animations at this time is avoiding unnecessary complexity. If you decide to use CSS animations in customer facing websites, you’ll still need to include a fallback method for browsers that don’t support it. I don’t see any reason to complicate things when animated gifs work perfectly fine.

Unless a website is highly dynamic with ever changing colors, I don’t see a reason to use CSS animations for loading images. Again, my opinion might change in five years when more browsers support CSS animations.

  1. December 26, 2013 at 2:54 pm

    And of course, if animations are necessary at all, it is best to use them sparingly. Too many are a distraction and could drive people away from your site.

  2. July 26, 2014 at 2:54 pm

    I see a lot of interesting articles on your page. You have
    to spend a lot of time writing, i know how to save you a lot of
    time, there is a tool that creates high quality,
    google friendly posts in couple of minutes, just type in google
    – k2 unlimited content

  3. August 29, 2014 at 7:24 pm

    I read a lot of interesting articles here. Probably you spend a
    lot of time writing, i know how to save you a lot of work, there is an online tool that creates
    unique, SEO friendly articles in minutes, just type in google – laranitas free content source

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: