Pre-loaders are a common sight in modern web design. As users we expect the web to be fast and fluid - we don’t like waiting for things. Pre-loaders offer visual feedback in the event of content being loaded, thereby managing expectations and reducing the chance of a user abandoning your website.

CSS3 Essentials for Creating Pre-loaders



Before we dive into building our collection of CSS3 pre-loaders, first I’ll be discussing some of the attributes of CSS3 which are essential for creating these type of pre-loaders.



Pseudo Elements :before :after



Pseudo elements are really useful in helping creating CSS3 pre-loaders. Pseudo elements essentially create a fake element before or after the HTML element in question.



“Pseudo is derived from the Greek word pseudēs which means false.”

This is similar to creating an extra element that doesn't really exist however pseudo elements can be styled using CSS. These pseudo elements aren't a necessity for creating CSS3 pre-loaders but they do come in handy and allow us to use minimal markup.

Pseudo elements can be styled exactly the same way as you would any other HTML element the only difference being that you must specify a content property. Without specifying this the pseudo element will not render. The content property can contain any text which may be useful if your pre-loader needs to contain words such as “Loading...” however if you don’t need any text content then you can just leave the content property blank.

CSS3 Animation



CSS pseudo elements are useful but not essential for creating CSS3 pre-loaders, but the animation property is. Without this the pre-loader would fail to animate and would just be a static visual - not very useful to indicate that the content is loading.



“The main component of CSS animations is @keyframes, the CSS rule where animation is created. Think of @keyframes as being stages along a timeline. Inside@keyframes, you can define these stages, each having a different style declaration.” - A beginners introduction to CSS animation

Note: before we jump into the demo's it might be worth noting that vendor prefixes are not included in the code snippets below. If you need the vendor prefixes then please see the codepen examples.

1. Audio Wave

The idea behind this pre-loader is to create an animation similar to an audio wave.



HTML

This is achieved by creating five spans, each one representing an audio bar.



CSS

The effect is achieved by animating the height of each span from 5px to 30px. The span also moves down on the Y axis by 15px to give the effect that it is growing from the centre.



By default the animation on each span happens at the same time. The Mexican wave effect is created by adding animation-delay to each span with an offset of 2 milliseconds. Each span is targeted using the nth-child() selector.

2. Circular Square

This pre-loader uses four squares which shift, rotate, change color and become circles.

HTML

It's created by using four spans. Each one is a circle/square and has its own animation applied to it.



CSS

All four of them transform from a square into a circle by adjusting the border-radius from 0px (square) to 20px (circle).



Each one also rotates and moves along the X & Y axis in opposite direction to its current position. The color of each span is also animated from a uniform purple to its own independent color. This gives the impression of the shapes merging from several circles into one square.

3. Crossing Shapes

The Crossing Shapes pre-loader is a single div that utilises the :before and :after pseudo elements that we talked about previously.



HTML

CSS

One animation is placed on #preloader_3:before and another on #preloader_3:after . Each animation changes into a different color at the opposite time. Similarly to the previous pre-loader each pseudo element changes from a circle to a square by animating the border-radius property.

4. The Snake

The snake is made up of a collection of spans each one being styled to form a circle.



HTML

Here's the markup, but you could always try creating the snake pre-loader with three circles and rather than having several spans just use #preloader_4 div with :before and :after .



CSS

The animation is created by transforming the Y position of each animation by -10px and changing color from blue to yellow. To create the underlying shadow effect a drop shadow is added to each span which changes its vertical shadow size from 0px to 20px.



Similarly to pre-loader 1, by adding animation-delay to each span and offsetting each span's delay by 2 milliseconds it creates the wave effect.

5. Spinning Disc

This is.. a spinny thing.

HTML

Here we simply use a single div for the central circle and :after on that div to create the outer lines.



CSS

Adding a border to the top and bottom and giving it a border-radius of 50px creates the two outer lines. An animation is added to the main div, just to change the main div's color and create the rotation effect by adding transform: rotate() . The :after element animation is added to change the color of the outer border.



6. Glistening Window

We've gone a bit Microsoft on this one..

HTML

This pre-loader is created using a div and four spans to create each square.



CSS

These squares are then positioned in a grid-like order. Animation is added to the main div to rotate the whole pre-loader. Another animation is added to the spans which scales them from 100% to 50%. We then add animation-delay to each span to create the pulsing effect.



Conclusion

The great advantage about using CSS3 pre-loaders over image pre-loaders is that they are scalable and retina ready. That means that no matter what device they are displayed on they will always be crisp, clean and future proof (though bear in mind that not all legacy browsers support CSS3 animation).

By understanding a few important CSS3 properties and techniques you should now be able to create your own CSS3 pre-loaders. They're fun to create and with a little bit of experimentation you can create some really cool animations to prevent users from leaving your website.

If you've created any cool pre-loaders recently then I'd love to see them! Feel free to leave your comments below.