CSS Infinity loader Animation
Certainly! Creating a CSS infinity loader animation can enhance your website’s user experience by providing visual feedback during loading processes. Let’s dive into how you can achieve this effect using CSS.
What is a Loading Animation?
A loading animation is a visual cue that reassures users that their request is being processed. When a user clicks on a link or button, the animation appears until the load process completes. These animations can include spinners, loading bars, or other creative elements. So We can defined An infinite loading animation continuously loops without indicating how long the process will take. Here’s an example of creating an infinite loader using CSS:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
</body>
</html>
CSS
body {
background: url('img.jpg');
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
font-size: 24px;
position: relative;
height: 100px;
width: 190px;
p
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 10px solid #6e6ed6;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
}
.container::after {
content: "";
position: absolute;
top: 0;
right: 0;
border: 10px solid #6e6ed6;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
}
.top-left {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100px;
height: 50px;
z-index: 1;
}
.top-left::before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 10px dotted transparent;
border-top-color: yellow;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
animation: clockwise 1s linear infinite, opacity 2s linear -2000ms infinite;
}
.top-right {
position: absolute;
top: 0;
right: 0;
overflow: hidden;
width: 100px;
height: 50px;
z-index: 1;
}
.top-right::before {
content: "";
position: absolute;
top: 0;
right: 0;
border: 10px dotted transparent;
border-top-color: yellow;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
animation: anti-clockwise 1s linear infinite, opacity 2s linear -1000ms infinite;
}
.bottom-left {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
width: 100px;
height: 50px;
z-index: 1;
}
.bottom-left::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
border: 10px solid transparent;
border-top-color: yellow;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
animation: clockwise 1s linear infinite, opacity 2s linear -500ms infinite;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
width: 100px;
height: 50px;
z-index: 1;
}
.bottom-right::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border: 10px solid transparent;
border-top-color: yellow;
border-radius: 50%;
height: 100px;
width: 100px;
box-sizing: border-box;
animation: anti-clockwise 1s linear infinite, opacity 2s linear -1500ms infinite;
}
@keyframes clockwise {
0% {
transform: rotate(-45deg);
}
100% {
transform: rotate(315deg);
}
}
@keyframes anti-clockwise {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(-315deg);
}
}
@keyframes opacity {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
75% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
For More Tutorials Please Click Here
