CSS Loading Animation With Box Effect
A CSS loading animation is a visual effect created using Cascading Style Sheets (CSS) to indicate that content on a web page is in the process of loading or is awaiting retrieval. Loading animations are commonly employed to enhance user experience by providing feedback that a task is underway, particularly when there might be a delay in retrieving or processing data.
CSS loading animations can take various forms, such as spinners, progress bars, or pulsating elements. These animations are typically achieved through CSS properties like keyframe animations, transitions, or transformations, without the need for external libraries or JavaScript.
Loading animations can be customized in terms of size, color, speed, and design to match the overall style of a website or application. They are often used in conjunction with asynchronous operations like fetching data from a server, loading large media files, or executing complex calculations.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Loading Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<span style="--i:01"></span>
<span style="--i:1"></span>
<span style="--i:2"></span>
<span style="--i:3"></span>
<span style="--i:4"></span>
<span style="--i:5"></span>
<span style="--i:6"></span>
<span style="--i:7"></span>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #9179ca;
}
.loader {
position: relative;
display: flex;
}
.loader span {
width: 50px;
height: 200px;
margin: 0 20px;
background: #9179ca;
animation: animate 1.4s linear infinite;
animation-delay: calc(.2s * var(--i));
}
@keyframes animate {
0% {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translate(-50px) scale(1);
}
50% {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
opacity: 1;
transform: translate(0px) scale(1.2);
}
100% {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translate(50px) scale(1);
}
}
For More Tutorials Please Click Here
1 comment
This platform is unbelievable. The magnificent data uncovers the distributer’s excitement. I’m shocked and expect additional such astonishing posts.