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 fuid - we dont like waiting for things. Pre-
loaders ofer visual feedback in the event of content being loaded,
thereb managing expectations and reducing the chance of a user
abandoning our website.
CSS3 Essentials for Creating Pre-loaders
!efore we dive into building our collection of "##$ pre-loaders, %rst &ll
be discussing some of the attributes of "##$ which are essential for
creating these tpe of pre-loaders.
Pseudo Elements :before :after
Pseudo elements are really useful in helping creating "##$ pre-loaders.
Pseudo elements essentiall create a fake element before or after the
'()* element in +uestion.
Pseudo is derived from the Greek
word pseuds which means false.
(his is similar to creating an extra element that doesn,t reall exist
however pseudo elements can be stled using "##. (hese pseudo
elements aren,t a necessit for creating "##$ pre-loaders but the do
come in hand and allow us to use minimal markup.
Pseudo elements can be stled exactl the same wa as ou would an
other '()* element the onl diference being that ou must specif
a content propert. -ithout specifing this the pseudo element will not
render. (he content propert can contain an text which ma be useful
if our pre-loader needs to contain words such as .*oading.../ however
if ou dont need an text content then ou can 0ust leave the content
propert blank.
CSS3 Animation
"## pseudo elements are useful but not essential for creating "##$ pre-
loaders, but the animation propert is. -ithout this the pre-loader would
fail to animate and would 0ust be a static visual - not ver 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 ein! sta!es
alon! a timeline. "nside@keyframes, you can
de#ne these sta!es, each havin! a di$erent
style declaration. % & e!inners introduction to
CSS animation
Note1 before we 0ump into the demo,s it might be worth noting that
vendor pre%xes are not included in the code snippets below. &f ou need
the vendor pre%xes then please see the codepen examples.
1. Audio Wave
(he idea behind this pre-loader is to create an animation similar to an
audio wave.
HT!
(his is achieved b creating %ve spans, each one representing an audio
bar.
2
3
$
4
5
6
7
8div id9:preloader;2:<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8=div<
CSS
(he efect is achieved b animating the height of each span from 5px to
$>px. (he span also moves down on the ? axis b 25px to give the efect
that it is growing from the centre.
>
2
>
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
Bpreloader;2C
"osition1relativeD
E
Bpreloader;2 spanC
dis"la#1blockD
bottom1>pxD
$idt%1 ApxD
%eig%t1 5pxD
ba&'ground1BAb5Ab6D
"osition1absoluteD
animation1 preloader;2 2.5s in%nite ease-in-outD
E

Bpreloader;2 span1nth-childF3GC
left122pxD
animation-dela1 .3sD

E
Bpreloader;2 span1nth-childF$GC
left133pxD
animation-dela1 .4sD
E
Bpreloader;2 span1nth-childF4GC
left1$$pxD
animation-dela1 .6sD
E
Bpreloader;2 span1nth-childF5GC
left144pxD
animation-dela1 .@sD
E
Hkeframes preloader;2 C
>I C%eig%t15pxDtransform1translate?F>pxGDba&'ground1BAb5Ab6DE
35I C%eig%t1$>pxDtransform1translate?F25pxGDba&'ground1B$4A@dbDE
5>I C%eig%t15pxDtransform1translate?F>pxGDba&'ground1BAb5Ab6DE
2>>I C%eig%t15pxDtransform1translate?F>pxGDba&'ground1BAb5Ab6DE
E
@
3
A
$
>
$
2
$
3
$
$
$
4
$
5
$
6
! default the animation on each span happens at the same time.
(he 'e(ican waveefect is created b adding animation-dela to each span
with an ofset of 3 milliseconds. Jach span is targeted using the nth-
childFG selector.
(. Cir&ular S)uare
(his pre-loader uses four s+uares which shift, rotate, change color and
become circles.
HT!
&t,s created b using four spans. Jach one is a circle=s+uare and has its
own animation applied to it.
2
3
$
4
5
6
8div id9:preloader;3:<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8=div<
CSS
All four of them transform from a s+uare into a circle b ad0usting the
border-radius from >px Fs+uareG to 3>px FcircleG.
>
2
>
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
@
Bpreloader;3C
"osition1 relativeD
left1 5>ID
$idt%1 4>pxD
%eig%t1 4>pxD
E
Bpreloader;3 spanC
dis"la#1blockD
bottom1>pxD
$idt%1 3>pxD
%eig%t1 3>pxD
ba&'ground1BAb5Ab6D
"osition1absoluteD
E
Bpreloader;3 span1nth-childF2GC
animation1 preloader;3;2 2.5s in%nite ease-in-outD
E
Bpreloader;3 span1nth-childF3GC
left13>pxD
animation1 preloader;3;3 2.5s in%nite ease-in-outD

E
Bpreloader;3 span1nth-childF$GC
to"1>pxD
animation1 preloader;3;$ 2.5s in%nite ease-in-outD
E
Bpreloader;3 span1nth-childF4GC
to"1>pxD
left13>pxD
animation1 preloader;3;4 2.5s in%nite ease-in-outD
E

Jach one also rotates and moves along the K L ? axis in opposite
direction to its current position. (he color of each span is also animated
from a uniform purple to its own independent color. (his gives the
impression of the shapes merging from several circles into one s+uare.
3. Crossing S%a"es
(he "rossing #hapes pre-loader is a single div that utilises
the 1before and 1after pseudo elements that we talked about previousl.
HT!
2
8div id9:preloader;$:<8=div<
CSS
>
2
>
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
Bpreloader;$C
"osition1relativeD
E
Bpreloader;$1beforeC
$idt%13>pxD
%eig%t13>pxD
border-radius13>pxD
ba&'ground1blueD
&ontent1,,D
"osition1absoluteD
ba&'ground1BAb5Ab6D
animation1 preloader;$;before 2.5s in%nite ease-in-outD
E

Bpreloader;$1afterC
$idt%13>pxD
%eig%t13>pxD
border-radius13>pxD
ba&'ground1blueD
&ontent1,,D
"osition1absoluteD
ba&'ground1B3ecc72D
left133pxD
animation1 preloader;$;after 2.5s in%nite ease-in-outD
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
@
3
A
$
>
$
2
$
3
$
$
$
4
$
5
$
6
E

Hkeframes preloader;$;before C
>I Ctransform1 translateKF>pxG rotateF>degGE
5>I Ctransform1 translateKF5>pxG scaleF2.3G rotateF36>degGD
ba&'ground1B3ecc72Dborder-radius1>pxDE
2>>I Ctransform1 translateKF>pxG rotateF>degGE
E
Hkeframes preloader;$;after C
>I Ctransform1 translateKF>pxGE
5>I Ctransform1 translateKF-5>pxG scaleF2.3G rotateF-
36>degGDba&'ground1BAb5Ab6Dborder-radius1>pxDE
2>>I Ctransform1 translateKF>pxGE
E
Mne animation is placed on Bpreloader;$1before and another
on Bpreloader;$1after. Jach animation changes into a diferent color at the
opposite time. #imilarl to the previous pre-loader each pseudo element
changes from a circle to a s+uare b animating the border-radius propert.
*. T%e Sna'e
(he snake is made up of a collection of spans each one being stled to
form a circle.
HT!
'ere,s the markup, but ou could alwas tr creating the snake pre-
loader with three circles and rather than having several spans 0ust
use Bpreloader;4 div with 1before and 1after.
2
3
$
4
5
6
7
8div id9:preloader;4:<
8span<8=span
<
8span<8=span
<
8span<8=span
<
8span<8=span
<
8span<8=span
<
8=div<
CSS
(he animation is created b transforming the ? position of each
animation b -2>px and changing color from blue to ellow. (o create the
underling shadow efect a drop shadow is added to each span which
changes its vertical shadow siNe from >px to 3>px.
>
2
>
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
Bpreloader;4C
"osition1relativeD
E
Bpreloader;4 spanC
"osition1absoluteD
$idt%13>pxD
%eig%t13>pxD
ba&'ground1B$4A@dbD
opacit1>.5D
border-radius13>pxD
-animation1 preloader;4 2s in%nite ease-in-outD

E
Bpreloader;4 span1nth-childF3GC
left13>pxD
animation-dela1 .3sD
E
Bpreloader;4 span1nth-childF$GC
left14>pxD
animation-dela1 .4sD
E
Bpreloader;4 span1nth-childF4GC
left16>pxD
animation-dela1 .6sD
E
Bpreloader;4 span1nth-childF5GC
left1@>pxD
animation-dela1 .@sD
E
Hkeframes preloader;4 C
>I Copacit1 >.$D transform1translate?F>pxGD box-shadow1 >px >px $px rgbaF>, >, >,
>.2GDE
5>I Copacit1 2D transform1 translate?F-2>pxGD ba&'ground1Bf2c4>fD box-shadow1
>px 3>px $px rgbaF>, >, >, >.>5GDE
2>>I Copacit1 >.$D transform1translate?F>pxGD box-shadow1 >px >px $px rgbaF>, >,
>, >.2GDE
E
@
3
A
$
>
$
2
$
3
$
$
$
4
#imilarl to pre-loader 2, b adding animation-dela to each span and
ofsetting each span,s dela b 3 milliseconds it creates the wave efect.
+. S"inning ,is&
(his is.. a spinn thing.
HT!
'ere we simpl use a single div for the central circle and 1after on that
div to create the outer lines.
2
8div id9:preloader5:<8=div<
CSS
Adding a border to the top and bottom and giving it a border-radius of
5>px creates the two outer lines. An animation is added to the main div,
0ust to change the main div,s color and create the rotation efect b
adding transform1 rotateFG . (he 1after element animation is added to change
the color of the outer border.
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
@
3
A
Bpreloader5C
"osition1relativeD
$idt%1$>pxD
%eig%t1$>pxD
ba&'ground1B$4A@dbD
border-radius15>pxD
animation1 preloader;5 2.5s in%nite linearD
E
Bpreloader51afterC
"osition1absoluteD
$idt%15>pxD
%eig%t15>pxD
border-to"12>px solid BAb5Ab6D
border-bottom12>px solid BAb5Ab6D
border-left12>px solid transparentD
border-rig%t12>px solid transparentD
border-radius15>pxD
&ontent1,,D
to"1-3>pxD
left1-3>pxD
animation1 preloader;5;after 2.5s in%nite linearD
E
Hkeframes preloader;5 C
>I Ctransform1 rotateF>degGDE
5>I Ctransform1 rotateF2@>degGDba&'ground1B3ecc72DE
2>>I Ctransform1 rotateF$6>degGDE
E
Hkeframes preloader;5;after C
>I Cborder-to"12>px solid BAb5Ab6Dborder-bottom12>px solid BAb5Ab6DE
5>I Cborder-to"12>px solid B$4A@dbDborder-bottom12>px solid B$4A@dbDE
2>>I Cborder-to"12>px solid BAb5Ab6Dborder-bottom12>px solid BAb5Ab6DE
E
$
>
$
2
$
3
-. .listening Windo$
-e,ve gone a bit )icrosoft on this one..
HT!
(his pre-loader is created using a div and four spans to create each
s+uare.
2
3
$
4
5
6
8div id9:preloader6:<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8s"an<8=s"a
n<
8=div<
CSS
(hese s+uares 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 2>>I to 5>I. -e then
add animation-dela to each span to create the pulsing efect.
>
2
>
3
>
$
>
4
>
5
>
6
>
7
>
@
>
A
2
>
2
2
2
3
2
$
2
4
2
5
2
6
2
7
2
@
2
A
3
>
3
2
3
3
3
$
3
4
3
5
3
6
3
7
3
Bpreloader6C
"osition1relativeD
$idt%1 43pxD
%eig%t1 43pxD
animation1 preloader;6 5s in%nite linearD
E
Bpreloader6 spanC
$idt%13>pxD
%eig%t13>pxD
"osition1absoluteD
ba&'ground1redD
dis"la#1blockD
animation1 preloader;6;span 2s in%nite linearD
E
Bpreloader6 span1nth-childF2GC
ba&'ground1B3ecc72D

E
Bpreloader6 span1nth-childF3GC
left133pxD
ba&'ground1BAb5Ab6D
animation-dela1 .3sD

E
Bpreloader6 span1nth-childF$GC
to"133pxD
ba&'ground1B$4A@dbD
animation-dela1 .4sD
E
Bpreloader6 span1nth-childF4GC
to"133pxD
left133pxD
ba&'ground1Bf2c4>fD
animation-dela1 .6sD
E
Hkeframes preloader;6;span C
>I C transform1scaleF2GD E
5>I C transform1scaleF>.5GD E
2>>I C transform1scaleF2GD E
E
@
3
A
$
>
$
2
$
3
$
$
$
4
$
5
$
6
$
7
$
@
$
A
4
>
Con&lusion
(he great advantage about using "##$ pre-loaders over image pre-
loaders is that the are scalable and retina read. (hat means that no
matter what device the are displaed on the will alwas be crisp, clean
and future proof Fthough bear in mind that not all legac browsers
support "##$ animationG.
! understanding a few important "##$ properties and techni+ues ou
should now be able to create our own "##$ pre-loaders. (he,re fun to
create and with a little bit of experimentation ou can create some reall
cool animations to prevent users from leaving our website.
&f ou,ve created an cool pre-loaders recentl then &,d love to see themO
Peel free to leave our comments below.