Creative CSS loader Using HTML and CSS
Creating a creative CSS loader can be a fun and interesting project. Here I am going to show you example of a CSS loader using HTML and CSS. Feel free to customize it according to your preferences.
In the context of web development and user interfaces, a “loader” refers to a visual element that indicates the progress of a task. Loaders are often used to inform users that something is happening in the background, such as data being fetched from a server or a resource being loaded.
Loaders can take various forms, including spinners, progress bars, or animated graphics. Their purpose is to provide feedback to users, letting them know that the application or website is working on a task and hasn’t frozen or become unresponsive.
Designing loaders creatively can enhance the user experience by adding a touch of personality or branding to the loading process.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Creative CSS loader Using HTML and CSS </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background-color: #797c85;
}
.loader{
width: 180px;
height: 180px;
margin: 0 auto;
position: relative;
}
.loader div{
width: 100%;
height: 100%;
border: 15px solid #aff50c;
border-radius: 10px;
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
animation: animate 3.5s infinite linear;
animation-duration: 2s;
}
.loader div:nth-child(2){
width: 110px;
height: 110px;
animation-duration: 2.8s;
}
.loader div:nth-child(3){
width: 50px;
height: 50px;
}
.loader div:before,
.loader div:after{
content: '';
background: #11182e;
width: 15px;
height: 75%;
position: absolute;
top: -15px;
left: -15px;
}
.loader div:after{
top: auto;
bottom: -15px;
left: auto;
right: -15px;
}
@keyframes animate{
0%{ transform: translateX(-50%) translateY(-50%) perspective(1000px) rotateY(0deg); }
100%{ transform: translateX(-50%) translateY(-50%) perspective(1000px) rotateY(360deg); }
}
