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); }
}
8 comments
You not the expert, casually?
I have read so many articles or reviews about the blogger lovers but this article is
actually a good post, keep it up.
Heya i am for the primary time here. I came across this board and I find It really helpful & it
helped me out much. I am hoping to provide one thing again and
aid others such as you helped me.
Greetings from Idaho! I’m bored to tears at work so I decided to browse your blog on my iphone during lunch break.
I love the info you present here and can’t wait to take a
look when I get home. I’m surprised at how fast your blog
loaded on my cell phone .. I’m not even using WIFI, just 3G ..
Anyhow, fantastic site!
Greetings! Very useful advice in this particular article!
It’s the little changes that make the biggest changes.
Thanks a lot for sharing!
Unquestionably believe that which you said. Your favorite reason seemed to
be on the web the simplest thing to be aware of.
I say to you, I definitely get annoyed while people think about
worries that they plainly don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side-effects , people could take a signal.
Will likely be back to get more. Thanks
Hello! I’ve been following your blog for a while now and finally got
the courage to go ahead and give you a shout out from
Lubbock Texas! Just wanted to say keep up the fantastic job!
I love looking through an article that will make people think.
Also, thanks for permitting me to comment!