Creative CSS Loading Animations

Today, Hugo Giraudel is going to do a lot of stuff with CSS animations. Indeed, he will talk about CSS loading animations. A few things before he starts: You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files; the goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-; if you plan to support these browsers, be sure to make fallbacks. Hugo Giraudel personally uses the box-model where [width] = [element-width] + [padding] + [borders].

Hugo Giraudel will start with something pretty simple as always. His little sphere is running infinitely from left to right in the bar. Movement is important to make the user understand the application/website is actually doing something. Pretty minimalist, right? He could even do this with a single element but it can easily make the CSS ugly. Note that Hugo Giraudel could have both, clean markup and nice CSS when he’ll be able to animate pseudo-elements. First, he creates the container for the sphere: the bar. To preserve proportions and make the preloaders scalable, he uses the em unit. Simply change the font-size value on the wrapper to scale the whole thing as you wish.