Creating a Collection of CSS3 Animated Pre-loaders

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.

<div id="preloader_1">
      		<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  			<span></span>
  		</div>

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.

#preloader_1{
    position:relative;
}
#preloader_1 span{
	display:block;
	bottom:0px;
	width: 9px;
	height: 5px;
	background:#9b59b6;
	position:absolute;
    animation: preloader_1 1.5s	 infinite ease-in-out;
}

#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;

}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@keyframes preloader_1 {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:30px;transform:translateY(15px);background:#3498db;}
    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

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.

<div id="preloader_2">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

CSS

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

#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
    display:block;
	bottom:0px;
	width: 20px;
	height: 20px;
	background:#9b59b6;
	position:absolute;
}
#preloader_2 span:nth-child(1){
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
animation: preloader_2_2 1.5s infinite ease-in-out;

}
#preloader_2 span:nth-child(3){
top:0px;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
animation: preloader_2_4 1.5s infinite ease-in-out;
}

@-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}


@-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
     100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}

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

1	<div id="preloader_3"></div>

CSS

#preloader_3{
    position:relative;
}
#preloader_3:before{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#9b59b6;
	animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
	width:20px;
	height:20px;
	border-radius:20px;
	background:blue;
	content:'';
	position:absolute;
	background:#2ecc71;
	left:22px;
	animation: preloader_3_after 1.5s infinite ease-in-out;
}

@keyframes preloader_3_before {
    0% {transform: translateX(0px) rotate(0deg)}
    50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
      100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
    0% {transform: translateX(0px)}
    50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
  	100% {transform: translateX(0px)}
}

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.

<div id="preloader_4">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

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.

#preloader_4{
    position:relative;
}
#preloader_4 span{
	position:absolute;
	width:20px;
	height:20px;
	background:#3498db;
	opacity:0.5;
border-radius:20px;
	-animation: preloader_4 1s infinite ease-in-out;

}
#preloader_4 span:nth-child(2){
	left:20px;
	animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
	left:40px;
	animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
	left:60px;
	animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
	left:80px;
	animation-delay: .8s;
}
@keyframes preloader_4 {
    0% {opacity: 0.3; transform:translateY(0px);    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
    50% {opacity: 1; transform: translateY(-10px); background:#f1c40f;	box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
  	100%  {opacity: 0.3; transform:translateY(0px);	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}

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.

1	<div id="preloader5"></div>

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.

#preloader5{
    position:relative;
	width:30px;
	height:30px;
	background:#3498db;
	border-radius:50px;
	animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
	position:absolute;
	width:50px;
	height:50px;
	border-top:10px solid #9b59b6;
	border-bottom:10px solid #9b59b6;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-radius:50px;
	content:'';
	top:-20px;
	left:-20px;
	animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);background:#2ecc71;}
    100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
    0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
    50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
    100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

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.

 <div id="preloader6">
    		<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>

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.

#preloader6{
    position:relative;
	width: 42px;
	height: 42px;
	animation: preloader_6 5s infinite linear;
}
#preloader6 span{
	width:20px;
	height:20px;
	position:absolute;
	background:red;
	display:block;
	animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;

}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
	animation-delay: .2s;

}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
	animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
	animation-delay: .6s;
}
@keyframes preloader_6_span {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}

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.

Creating a Collection of CSS3 Animated Pre-loaders

CSS3 Essentials for Creating Pre-loaders

Pseudo Elements :before :after

CSS3 Animation

1. Audio Wave

HTML

CSS

2. Circular Square

HTML

CSS

3. Crossing Shapes

HTML

CSS

4. The Snake

HTML

CSS

5. Spinning Disc

HTML

CSS

6. Glistening Window

HTML

CSS

Conclusion

Pseudo Elements `:before` `:after`