CSS RESPONSIVE LODING ANIMATION CREATION PAGE FOR WEBSITE AND WEB PAGE U...
HTML And CSS Cooding
August 19, 2022
HTML SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>
<body>
<div class="load">
<hr/><hr/><hr/><hr/>
</div>
</body>
</html>
CSS SOURCE CODE
body{background:linear-gradient(90deg,red,blue);}
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
width:100px;
height:100px;}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}
.load :first-child{background:red;animation-delay:-1.5s}
.load :nth-child(2){background:green;animation-delay:-1s}
.load :nth-child(3){background:yellow;animation-delay:-0.5s}
.load :last-child{background:blue}
@keyframes spin{
0%,100%{transform:translate(0)}
25%{transform:translate(160%)}
50%{transform:translate(160%, 160%)}
75%{transform:translate(0, 160%)}
}
