CSS Loader Animation Effect With HTML and CSS
A CSS loader, also known as a spinner or a loading animation, is a graphical element that is used to indicate that a web page or component is loading or processing data. A CSS loader is typically used to improve the user experience by providing feedback to the user that something is happening, and to reduce the perceived wait time. In this tutorial, I am going to make CSS Loader Animation Effect With HTML and CSS.
A CSS loader is created using CSS code and can be customized to match the design of the website or application. There are many different types of loaders, including spinners, bars, and circles, and they can be animated or static.
Creating a CSS loader involves designing the graphical element and animating it using CSS transitions or animations. There are also many pre-designed CSS loaders available online that can be easily integrated into your website or application.
Overall, a CSS loader is a simple yet effective way to improve the user experience by providing feedback and reducing perceived wait times.
HTML
<!DOCTYPE html>
<html>
<head>
<title>loader</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background: #333;
}
.loader{
border: 4px solid #07da4d;
width: 68px;
height: 68px;
margin: 50px auto 0;
position: relative;
animation: animate 2.6s linear infinite;
}
.loader:before,
.loader:after{
content: '';
width: 50px;
height: 50px;
border: 4px solid #be65e2;
position: absolute;
top: 7px;
left: 7px;
animation: animate_1 1.3s linear infinite;
animation-direction: reverse;
}
.loader:after{
width: 96px;
height: 96px;
top: -15px;
left: -15px;
border:4px solid orange;
}
@keyframes animate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
@keyframes animate_1{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
License Terms
For More Tutorials Please Click Here
