Learn How to Create a Snake Style Loading Animation with HTML and CSS | Step-by-Step Tutorial
Discover how to create a mesmerizing waving animation with HTML and CSS. Follow our step-by-step tutorial and learn how to bring life to your web design with a simple and elegant waving effect.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Loading Page</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
<div class="circle-container">
<div class="circle"></div>
</div>
</div>
<style>
.links{
position: absolute;
bottom: 20px;
right: 20px;
}
.links a{
margin-left: 10px;
color: #fff;
letter-spacing: 1px;
font-size: 18px;
text-decoration: none;
}
.links a:hover{
color: #f3f3f3;
text-decoration: underline;
}
</style>
<div class="links">
<a href="https://www.youtube.com/channel/UCB_7fGuHvxBuZuS8lJIlgww" target="_blank">Youtube</a>
<a href="https://www.facebook.com/Nadeem.Akram035" target="_blank">Facebook</a>
<a href="https://github.com/Nadeem035" target="_blank">GitHub</a>
</div>
</body>
</html>
CSS CODE
body {
background: blueviolet;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle-container {
width: 400px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle-container:after {
content: '';
position: absolute;
width: 20px;
height: 5px;
border-radius: 50%;
background: #000;
bottom: 0;
opacity: 0.4;
left: 50%;
animation: shadow 2s linear infinite;
}
.circle-container:nth-child(2):after {
animation-delay: -0.3s;
}
.circle-container:nth-child(3):after {
animation-delay: -0.6s;
}
.circle {
width: 15px;
height: 15px;
background: #fff;
left: 50%;
top: 50%;
border-radius: 50%;
position: absolute;
animation: anim 2s linear infinite;
}
.circle-container:nth-child(2) .circle {
animation-delay: -0.3s;
}
.circle-container:nth-child(3) .circle {
animation-delay: -0.6s;
}
@keyframes anim {
0% {
transform-origin: 400% 50%;
}
50% {
transform: rotate(360deg);
transform-origin: 400% 50%;
}
50.1% {
transform: rotate(0deg);
transform-origin: -300% 50%;
}
100% {
transform: rotate(-360deg);
transform-origin: -300% 50%;
}
}
@keyframes shadow {
0% {
}
12.5% {
transform: translate(50px) scale(0.6);
}
25% {
transform: translate(120px);
}
37.5% {
transform: translate(50px) scale(1.4);
}
50% {
transform: translate(0px);
}
62.5% {
transform: translate(-50px) scale(0.6);
}
75% {
transform: translate(-120px);
}
87.5% {
transform: translate(-50px) scale(1.4);
}
100% {
transform: translate(0px);
}
}
Download complete code from GITHub Snake Style Loading Animation
To Watch More Video as Like these
Just Subscribe My Youtube Channel DarkCoders
and Hit The Bell Icon