Hello Viewers, today in this tutorial, you’ll learn How To Make Creative CSS Loading Animation Effect Using Only HTML and CSS.
This Post is about making a Creative CSS Loading Animation Effect Using Only HTML and CSS.
To create this project ( Creative CSS Loading Animation Effect Using Only HTML and CSS). First, you need to create two Files one HTML File and another one is CSS File.
First, create an HTML file with the name of index.html and paste the given code in your HTML file.
<!DOCTYPE html>
<!-- Created by Amit Tutorial - www.amittutorial.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="wrapper">
<div class="loader">
<div class="loading one"></div>
<div class="loading two"></div>
<div class="loading three"></div>
<div class="loading four"></div>
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #00008bcd;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.wrapper .loader{
display: flex;
justify-content: space-evenly;
padding: 0 20px;
}
.loader .loading{
background: #fff;
width: 30px;
height: 30px;
border-radius: 50px;
margin: 0 10px;
animation: load 0.8s ease infinite;
}
.loader .loading.one{
animation-delay: 0.3s;
}
.loader .loading.two{
animation-delay: 0.4s;
}
.loader .loading.three{
animation-delay: 0.5s;
}
@keyframes load{
0%{
width: 30px;
height: 30px;
}
50%{
width: 20px;
height: 20px;
}
}
That’s all in this post, you’ve successfully created Creative CSS Loading Animation Effect Using Only HTML and CSS.
If your code does not work or you’ve faced any problem then comment down your problem. If you’re feeling difficult to understand what I am saying in this post. You can watch a full video tutorial on this project(Creative CSS Loading Animation Effect Using Only HTML and CSS).
Download Source Code:
