creating a collection of css3 animated pre-loaders

5/20/2018 Creating a Collection of CSS3 Animated Pre-loaders

1/17

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 uid - we dont like waiting for things. Pre-loaders oer visual feedback in the event of content being loaded,thereb managing expectations and reducing the chance of a userabandoning 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 reallyuseful 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 doesnt reall exist

however pseudo elements can be stled using "##. (hese pseudoelements arent 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 dierence being that ou must specif


2/17

a contentpropert. 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 essentialfor 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 demos 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.
http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068


3/17

HT!

(his is achieved b creating %ve spans, each one representing an audio

bar.

23$4567

8divid9:preloader;2:IC%eig%t15pxDtransform1translate?F>pxGDba&'ground1Bb5b6DE 35IC%eig%t1$>pxDtransform1translate?F25pxGDba&'ground1B$4@dbDE

5>IC%eig%t15pxDtransform1translate?F>pxGDba&'ground1Bb5b6DE

2>>IC%eig%t15pxDtransform1translate?F>pxGDba&'ground1Bb5b6DE

E


5/17

@3$>$2

$3$$$4$5$6

! default the animation on each span happens at the same time.

(he 'e(ican waveeect is created b adding animation-dela to each spanwith an oset of 3 milliseconds. Jach span is targeted using the nth-

childFGselector.

(.Cir&ular S)uare

(his pre-loader uses four s+uares which shift, rotate, change color and

become circles.

HT!

&ts created b using four spans. Jach one is a circle=s+uare and has its

own animation applied to it.

23$456

8divid9:preloader;3:ID$idt%1 4>pxD%eig%t1 4>pxDEBpreloader;3spanC dis"la#1blockD

bottom1>pxD

$idt%1 3>pxD

%eig%t1 3>pxD

ba&'ground1Bb5b6D

"osition1absoluteD

EBpreloader;3span1nth-childF2GCanimation1 preloader;3;22.5s in%nite ease-in-outDEBpreloader;3span1nth-childF3GCleft13>pxDanimation1 preloader;3;32.5s in%nite ease-in-outD

EBpreloader;3span1nth-childF$GCto"1>pxDanimation1 preloader;3;$2.5s in%nite ease-in-outDEBpreloader;3span1nth-childF4GCto"1>pxDleft13>pxDanimation1 preloader;3;42.5s in%nite ease-in-outDE


8/17

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!

28divid9:preloader;$:2>

3>$>4>5>6>7>@

>2>22232$

Bpreloader;$C

"osition1relativeD

E

Bpreloader;$1beforeC $idt%13>pxD

%eig%t13>pxD

border-radius13>pxD

ba&'ground1blueD

&ontent1D

"osition1absoluteD

ba&'ground1Bb5b6D

animation1 preloader;$;before 2.5s in%nite ease-in-outD

E

Bpreloader;$1afterC

$idt%13>pxD

%eig%t13>pxD

border-radius13>pxD

ba&'ground1blueD

&ontent1D

"osition1absoluteD

ba&'ground1B3ecc72D

left133pxD

animation1 preloader;$;after 2.5s in%nite ease-in-outD


9/17

2425262

72@23>32333$

343536373@3

$>$2$3$$$4$5$6

E

Hkeframes preloader;$;before C >ICtransform1 translateKF>pxG rotateF>degGE

5>ICtransform1 translateKF5>pxG scaleF2.3G rotateF36>degGDba&'ground1B3ecc72Dborder-radius1>pxDE

2>>ICtransform1 translateKF>pxG rotateF>degGE

EHkeframes preloader;$;after C >ICtransform1 translateKF>pxGE

5>ICtransform1 translateKF-5>pxG scaleF2.3G rotateF-

36>degGDba&'ground1Bb5b6Dborder-radius1>pxDE

2>>ICtransform1 translateKF>pxGE

E

Mne animation is placed on Bpreloader;$1beforeand another

on Bpreloader;$1after. Jach animation changes into a dierent 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-radiuspropert.


10/17

*.T%e Sna'e

(he snake is made up of a collection of spans each one being stled to

form a circle.

HT!

'eres 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 1beforeand 1after.

23$4567

8div id9:preloader;4:2>3>$>

4>5>6>7>@>2>

22232$242526

272@23>32333$343536373

Bpreloader;4C "osition1relativeD

EBpreloader;4spanC "osition1absoluteD

$idt%13>pxD

%eig%t13>pxD

ba&'ground1B$4@dbD opacit1>.5D

border-radius13>pxD -animation1 preloader;42s in%nite ease-in-outD

EBpreloader;4span1nth-childF3GC left13>pxD

animation-dela1 .3sD

EBpreloader;4span1nth-childF$GC left14>pxD


EBpreloader;4span1nth-childF4GC left16>pxD


EBpreloader;4span1nth-childF5GC left1@>pxD

animation-dela1 .@sD

EHkeframes preloader;4C

>ICopacit1 >.$D transform1translate?F>pxGD box-shadow1 >px>px$pxrgbaF>, >, >,>.2GDE 5>ICopacit1 2D transform1 translate?F-2>pxGD ba&'ground1Bf2c4>fD box-shadow1

>px3>px$pxrgbaF>, >, >, >.>5GDE 2>>I Copacit1 >.$D transform1translate?F>pxGD box-shadow1 >px>px$pxrgbaF>, >,

>, >.2GDE

E


12/17

@3$>$2

$3$$$4

#imilarl to pre-loader 2, b adding animation-delato each span and

osetting each spans dela b 3 milliseconds it creates the wave eect.

+.S"inning ,is&

(his is.. a spinn thing.

HT!

'ere we simpl use a single div for the central circle and 1afteron that

div to create the outer lines.

28divid9:preloader5:px creates the two outer lines. An animation is added to the main div,0ust to change the main divs color and create the rotation eect b

adding transform1 rotateFG. (he 1afterelement animation is added to change

the color of the outer border.


13/17

3>$>4>5

>6>7>@>2>222

32$242526272

@23>32333$343536373@3

Bpreloader5C "osition1relativeD

$idt%1$>pxD

%eig%t1$>pxD

ba&'ground1B$4@dbD

border-radius15>pxD

animation1 preloader;52.5s in%nite linearD

EBpreloader51afterC "osition1absoluteD

$idt%15>pxD

%eig%t15>pxD

border-to"12>pxsolidBb5b6D

border-bottom12>pxsolidBb5b6D

border-left12>pxsolidtransparentD

border-rig%t12>pxsolidtransparentD

border-radius15>pxD

&ontent1D

to"1-3>pxD left1-3>pxD

animation1 preloader;5;after 2.5s in%nite linearD

EHkeframes preloader;5C >ICtransform1 rotateF>degGDE

5>ICtransform1 rotateF2@>degGDba&'ground1B3ecc72DE

2>>ICtransform1 rotateF$6>degGDE

EHkeframes preloader;5;after C

>ICborder-to"12>pxsolidBb5b6Dborder-bottom12>pxsolidBb5b6DE

5>ICborder-to"12>pxsolidB$4@dbDborder-bottom12>pxsolidB$4@dbDE

2>>ICborder-to"12>pxsolidBb5b6Dborder-bottom12>pxsolidBb5b6DE

E


14/17

$>$2$3

.listening Windo$

eve gone a bit )icrosoft on this one..

HT!

(his pre-loader is created using a div and four spans to create eachs+uare.

23$45

6

8divid9:preloader6:pxD %eig%t13>pxD

"osition1absoluteD

ba&'ground1redD

dis"la#1blockD

animation1 preloader;6;span 2s in%nite linearD

EBpreloader6span1nth-childF2GCba&'ground1B3ecc72D

EBpreloader6span1nth-childF3GCleft133pxDba&'ground1Bb5b6D animation-dela1 .3sD

EBpreloader6span1nth-childF$GCto"133pxDba&'ground1B$4@dbD animation-dela1 .4sD

EBpreloader6span1nth-childF4GCto"133pxDleft133pxDba&'ground1Bf2c4>fD animation-dela1 .6sD

EHkeframes preloader;6;span C >IC transform1scaleF2GD E

5>IC transform1scaleF>.5GD E

2>>IC transform1scaleF2GD E

E


16/17

@3$>$2

$3$$$4$5$6$7$

@$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. (here fun tocreate and with a little bit of experimentation ou can create some reall

cool animations to prevent users from leaving our website.

&f ouve created an cool pre-loaders recentl then &d love to see themO

eel free to leave our comments below.


17/17

creating a collection of css3 animated pre-loaders

Documents