In this video you will learn, how to create an awesome and simple loading animation for your website with just using HTML and CSS.
Create a simple loading animation
Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Loading Animation Using HTML and CSS | Navid Dev</title>
</head>
<body>
<div class="loader">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script src="app.js"></script>
</body>
</html>CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(0, 55, 100);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.loader {
width: 300px;
height: 300px;
position: relative;
}
.inner {
width: 300px;
height: 300px;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
animation: loading 4s infinite;
}
.loader .inner:nth-child(1) {
animation-delay: 4s;
}
.loader .inner:nth-child(2) {
animation-delay: 3.5s;
}
.loader .inner:nth-child(3) {
animation-delay: 3s;
}
.loader .inner:nth-child(4) {
animation-delay: 2.5s;
}
.loader .inner:nth-child(5) {
animation-delay: 2s;
}
.loader .inner:nth-child(6) {
animation-delay: 1.5s;
}
.loader .inner:nth-child(7) {
animation-delay: 1s;
}
.loader .inner:nth-child(8) {
animation-delay: 0.5s;
}
@keyframes loading {
0% {
width: 0%;
height: 0%;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}
20% {
box-shadow: inset 0 5px 60px 15px rgba(255, 255, 255, 0.4);
}
40% {
box-shadow: inset 0 5px 60px 15px rgba(255, 255, 255, 0.2);
}
100% {
width: 300px;
height: 300px;
box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}
}