LOADER PART 2


Steps to follow

  1. Copy loader.html file and paste them into notepad++ or any text editor
  2. Copy loader.css file and paste them in same text editor.
  3. Link both with link tag in html file

<link rel=”stylesheet” type=”text/css” href=”load.css”>

loader.html

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”load.css”>
</head>
<body>
<div class=”main”>
<div class=”div1″></div><div class=”div2″></div><div class=”div3″></div><div class=”div4″></div><div class=”div5″></div>
</div>
</body>
</html>

loader.css

body{background:#fff;}
.main{margin-top:200px;margin-left:300px;}
.main div{float:left;width:10px;height:10px;border-radius:75px;margin:10px;}
.main .div1{animation:loader1 1s linear 1;}
.main .div2{animation:loader2 1s linear 2;}
.main .div3{animation:loader3 1s linear 3;}
.main .div4{animation:loader4 1s linear 4;}
.main .div5{animation:loader5 1s linear 5;}
@keyframes loader1{
20%{background:#66ccff;}
}
@keyframes loader2{
40%{background:#0099e6;}
}
@keyframes loader3{
60%{background:#006699;}
}
@keyframes loader4{
80%{background:#00334d;}
}
@keyframes loader5{
100%{background:#00111a;}
}

View of loading of animation

To follow my blog to click below

© WebCoder.com

Please follow me on social media pages : –

Facebook

Twitter

LinkedIn

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s