CSS RESPONSIVE LODING ANIMATION CREATION PAGE FOR WEBSITE AND WEB PAGE U...

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%)}

}

Tags

You May Like

Show more
Error 404: Results Not Found Use Correct /Label or /recent or /random code to Show Posts

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.