CODEPEN:
Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Loding%20Animation
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>page</title>
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div class="top a1"></div>
<div class="top a2"></div>
<div class="top a3"></div>
<div class="top a4"></div>
</body>
</html>
CSS CODE:
body, html {
background: #252626;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.top {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 30px;
}
.top.a1 , .top.a1:before{
background: #d21f1f;
animation-delay: 0s;
}
.top.a2, .top.a2:before{
background: #69c820;
animation-delay: 0.2s;
}
.top.a3, .top.a3:before{
background: #ceb32a;
animation-delay: 0.4s;
}
.top.a4, .top.a4:before{
background: #306bb3;
animation-delay: 0.6s;
}
.top:before{
content: "";
display: block;
position: absolute;
left: -5px;
top: -5px;
width: 60px;
height: 60px;
border-radius: 50%;
animation: ani 2s infinite ease-in;
}
@keyframes ani{
0%{
transform: scale(0.5);
opacity: 1;
}
100%{
transform: scale(2);
opacity: 0;
}
}
TrueCodes 
Grea
LikeLiked by 1 person
thank you so much….
LikeLike