CSS spin loader animation using HTML and CSS
A loader animation is a visual representation of a process happening in the background, such as content loading or data processing. It is a popular feature on websites and applications to provide feedback to the user that something is happening and to prevent them from becoming impatient or frustrated with long loading times. In this article, I am going to show how to create CSS spin loader animation using HTML and CSS.
Loader animations come in many different styles and designs, but they all serve the same purpose of indicating to the user that the content is being loaded and that they should wait for it to finish. Some common examples of loader animations include spinning circles, progress bars, and animated icons.
Loader animations can be created using various technologies such as HTML, CSS, and JavaScript, and they can be customized to fit the design and branding of the website or application. They are an important tool for providing a positive user experience and can help to improve user engagement and satisfaction.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div class="loader-inner-1"></div>
<div class="loader-inner-2"></div>
<div class="loader-inner-3"></div>
</div>
</body>
</html>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background: #312b5e;
}
.loader{
width: 300px;
height: 300px;
margin: 0 auto;
position: relative;
}
.loader .loader-inner-1{
width: 300px;
height: 300px;
border-radius: 50%;
border-bottom: 10px dashed #fca107;
position: absolute;
animation: loading-1 5s infinite linear;
}
.loader .loader-inner-2{
width: 200px;
height: 200px;
border-radius: 50%;
border-bottom: 10px dotted #78f124;
position: absolute;
top: 50px;
left: 45px;
animation: loading-1 1s infinite linear;
}
.loader .loader-inner-3{
width: 100px;
height: 100px;
border-radius: 50%;
border-bottom: 5px solid #ff0728;
position: absolute;
top: 100px;
left: 90px;
animation: loading-1 2s infinite linear;
}
@keyframes loading-1{
from{ -webkit-transform: rotate(0deg); }
to{ -webkit-transform: rotate(360deg); }
}
For More Tutorials Please Click Here
