LOADER PART 1


Steps to follow : –

  1. Create html file or copy loader.html below
  2. Create css file for styling or copy loader.css file below
  3. Link both files using link tag in html file as

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

loader.html

<html>
<head>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”loader.css”>
</head>
<body>
<div class=”div_out”></div>
<div class=”div_in”></div>
</body>
</html>

loader.css

body{background:#ff6666;}
.div_out{background:linear-gradient(green,blue);width:90px;height:90px;border-radius:95px;margin-left:200px;
animation-name:ex;animation-duration:0.2s;animation-iteration-count:infinite;margin-top:250px;margin-left:300px;}
.div_in{background:#ff6666;width:50px;height:50px;border-radius:95px;margin-top: -74px;margin-left:314px;padding:5px;animation-name:ex;animation-duration:2s;animation-iteration-count:infinite;
}
@keyframes ex{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

View Of Loader

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