Loader using HTML | CSS
HTML :
<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<meta charset="utf-8">
<title>Effect by Growcode</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="span-container">
<span class="yellow"></span>
<span class="blue"></span>
<span class="green"></span>
<span class="red"></span>
</div>
</div>
</body>
</html>
CSS :
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
position: relative;
background: #0C0404;
}
@keyframes speed {
0% {
transform: translate(0%);
border-radius: 50%;
}
25% {
transform: translate(150%) scale(0.5);
border-radius: 0%;
}
50% {
transform: translate(150%, 150%);
border-radius: 50%;
}
75% {
transform: translate(0, 150%) scale(0.5);
border-radius: 0%;
}
}
.span-container {
width: 100px;
height: 100px;
transform: translate(-50% -50%);
position: absolute;
top: 42%;
left: 45%;
}
span {
display: block;
position: absolute;
width: 40%;
height: 40%;
border-radius: 50%;
animation: speed 2s infinite ease-in-out;
}
.yellow {
background: #c9ba12;
animation-delay: 1.5s;
}
.blue {
background: #0511ee;
animation-delay: 1s;
}
.green {
background: #04e900;
animation-delay: 0.5s;
}
.red {
background: #ff0000;
}
Comments
Post a Comment