In this tutorial we will build Loading Animation Using HTML & CSS. You will learn about modern CSS including CSS grid, flexbox and responsive media queries.
Hello Viewers, today in this tutorial, you’ll learn How To Make Loading Animation Using HTML & CSS.
This Post is about making a Loading Animation Using HTML & CSS.
To create this project (Loading Animation Using HTML & CSS). First, you need to create two Files one HTML File and one is CSS File.
First, create an HTML file with the name of index.html and paste the code given in HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation | Amit Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="loader">
<div class="upper ball"></div>
<div class="right ball"></div>
<div class="lower ball"></div>
<div class="left ball"></div>
</div>
</section>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the code given in CSS file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
height: 100vh;
width: 100%;
background: #000;
align-items: center;
justify-content: center;
}
.loader{
height: 25px;
width: 25px;
position: relative;
animation: rotate 5s infinite;
}
.ball{
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.upper{
left: 0;
top: -22px;
background: #2da2ff;
animation: upper 1s linear infinite;
}
@keyframes upper{
50%{
top: 22px;
}
100%{
top: 22px;
}
}
.right{
right: -22px;
top: 0;
background: #ff337a;
animation: right 1s linear infinite;
}
@keyframes right{
50%{
right: 22px;
}
100%{
right: 22px;
}
}
.lower{
bottom: -22px;
left: 0;
background: #ffff00;
animation: lower 1s linear infinite;
}
@keyframes lower{
50%{
bottom: 22px;
}
100%{
bottom: 22px;
}
}
.left{
left: -22px;
top: 0;
background: #00ff00;
animation: left 1s linear infinite;
}
@keyframes left{
50%{
left: 22px;
}
100%{
left: 22px;
}
}
That’s all in this post, you’ve successfully created Loading Animation Using HTML & 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(Loading Animation Using HTML & CSS).
Download Source Code:
