4.7K
Preloader animation effect with HTML and CSS
We can create lots of animation effects using HTML and CSS. In this tutorial, I am going to create a Preloader animation effect with HTML and CSS. It is simple and easy to create. Just I have used here::after and::before to make a preloader animation effect. Let’s see the example of preloader animation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>loader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="loader"></div>
</div>
</body>
</html>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background:#333;
}
.wrap{
width: 80px;
height: 80px;
padding: 10px;
background: #f2f2f2;
border-radius: 50%;
}
.loader{
width: 80px;
height: 80px;
margin: 0 auto;
position: relative;
animation: spin 4s linear infinite;
}
.loader:before,
.loader:after{
content: "";
width: 14px;
height: 14px;
border-radius: 14px;
box-shadow: 18px 18px #0DB14C, -18px -18px #0189D2;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
animation: load 1.2s linear infinite;
}
.loader:after{
box-shadow: 18px 18px #6461AB, -18px -18px #CD014F;
transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes load{
50%{ height: 42px; }
}
@keyframes spin{
100%{ transform: rotate(360deg); }
}
For More Tutorials Please Click Here
