awesome Css Loader in 2 min!
Mohamed Elmardi
Posted on May 27, 2021
Hello
If you have been working with CSS before you may have trouble with animation,transitions,etc...
Maybe in this post you will change your mind!
how to create an awesome loader easily
- Create
index.htmlfile
<!DOCTYPE html>
<html>
<head>
<title>Loader!</title>
</head>
<body>
<div class="loader" >
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
step 2: add CSS to your HTML
<style type="text/css">
body {
background:#000;
}
.loader {
position:absolute;
width:100px;
height:100px;
transform:translate(-50%, -50%);
top:50%;
left:50%;
border-radius:50%;
animation:rotate 1.3s ease infinite;
}
.loader span {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:100%;
animation:rotate 1.7s ease infinite;
}
.loader span::before {
content:"";
position:absolute;
top:50%;
left:100%;
transform:translate(-50%, -50%);
width:4px;
border-radius:50%;
height:15px;
background:#38f860;
}
.loader span:nth-child(1) {
animation-delay:0.1s;
}
.loader span:nth-child(2) {
animation-delay:0.2s;
}
.loader span:nth-child(3) {
animation-delay:0.3s;
}
.loader span:nth-child(4) {
animation-delay:0.4s;
}
.loader span:nth-child(5) {
animation-delay:0.5s;
}
@keyframes rotate {
0%{
transform:translate(-50%, -50%) rotate(0deg);
filter:hue-rotate(0deg);
}
50% {
filter:hue-rotate(120deg);
}
100%{
transform:translate(-50%, -50%) rotate(360deg);
filter:hue-rotate(0deg);
}
}
</style>
And that's it run the HTML file in the browser to see an awesome Loader
💖 💪 🙅 🚩
Mohamed Elmardi
Posted on May 27, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related