Creating a Collection of CSS3 Animated Pre-loaders2

8/11/2019 Creating a Collection of CSS3 Animated Pre-loaders2

1/8

Creating a Collection of CSS3 Animated Pre-loaders Part2

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! div with "beforeand "after.

$%!&(

)div id*+preloader!+ )span)span

)span)span

)span)span )span)span

)span)span

)div

CSS

The animation is created by transforming the position of each

animation by -/p0 and changing color from blue to yellow. To create the

underlying shadow e1ect a drop shadow is added to each span which

changes its vertical shadow si2e from /p0 to $/p0.


2/8

//$/%/

!/&//(/3/4/

$%!&

(34$/$$$$

%$!$&$$($

#preloader!5 position"relative6

7#preloader!span5 position"absolute6

width"$/p06

height"$/p06

background"#%!43db6 opacity"/.&6

border-radius"$/p06 -animation" preloader!s in8nite ease-in-out6

7#preloader!span"nth-child9$:5 left"$/p06

animation-delay" .$s6

7#preloader!span"nth-child9%:5 left"!/p06

animation-delay" .!s6

7#preloader!span"nth-child9!:5 left"/p06

animation-delay" .s6

7#preloader!span"nth-child9&:5 left"3/p06

animation-delay" .3s6

7;keyframes preloader!5

/


3/8

3$4%/%

%$%%%!

=imilarly to pre-loader , by adding animation-delayto each span and

o1setting each span's delay by $ milliseconds it creates the wave e1ect.

5.Spinning Disc

This is.. a spinny thing.

HTML

Here we simply use a single div for the central circle and "afteron that

div to create the outer lines.

)divid*+preloader&+)div

CSS

>dding a border to the top and bottom and giving it a border-radiusof

&/p0 creates the two outer lines. >n animation is added to the main div,just to change the main div's color and create the rotation e1ect by

adding transform" rotate9:. The "afterelement animation is added to change

the color of the outer border.


4/8

$/%/!/&

//(/3/4/

$%!&(

34$/$$$$%$!

$&$$($3$4

#preloader&5 position"relative6

width"%/p06

height"%/p06

background"#%!43db6

border-radius"&/p06

animation" preloader&.&s in8nite linear6

7#preloader&"after5 position"absolute6

width"&/p06

height"&/p06

bordertop"/p0solid#4b&4b6

borderbotto!"/p0solid#4b&4b6

borderleft"/p0solidtransparent6

borderright"/p0solidtransparent6

border-radius"&/p06

content"''6

top"-$/p06 left"-$/p06

animation" preloader&after .&s in8nite linear6

7;keyframes preloader&5 /


5/8

%/%%$

".#listening $indow

?e've gone a bit @icrosoft on this one..

HTML

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

$%!&

)divid*+preloader+

)span)spa

n )span)spa

n

)span)spa

n )span)spa

n

)div

CSS

These sAuares are then positioned in a grid-like order. >nimation is

added to the main div to rotate the whole pre-loader. >nother animation

is added to the spans which scales them from //< to &/


6/8

//$/%/

!/&//(/3/4/

$%!&

(34$/$$$$

%$!$&$$($

#preloader5 position"relative6

width" !$p06

height" !$p06

animation" preloader&s in8nite linear6

7#preloaderspan5

width"$/p06 height"$/p06

position"absolute6

background"red6

displa%"block6

animation" preloaderspan s in8nite linear6

7#preloaderspan"nth-child9:5background"#$ecc(6

7#preloaderspan"nth-child9$:5left"$$p06background"#4b&4b6 animation-delay" .$s6

7#preloaderspan"nth-child9%:5top"$$p06background"#%!43db6 animation-delay" .!s6

7#preloaderspan"nth-child9!:5top"$$p06left"$$p06background"#fc!/f6 animation-delay" .s6

7;keyframes preloaderspan 5 /


7/8

3$4%/%

%$%%%!%&%%(%

3%4!/

Conclusion

The great advantage about using B==% 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 9though bear in mind that not all legacy browsers

support B==% animation:.

Cy understanding a few important B==% properties and techniAues you

should now be able to create your own B==% pre-loaders. They're fun to

create and with a little bit of e0perimentation you can create some really

cool animations to prevent users from leaving your website.

Df you've created any cool pre-loaders recently then D'd love to see themE

Feel free to leave your comments below.


8/8

Documents

Creating a Collection of CSS3 Animated Pre-loaders2