awesome Css Loader in 2 min!

Mohamed Elmardi — Thu, 27 May 2021 22:12:02 +0000

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.html file

<!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>

DEV Community: Mohamed Elmardi

awesome Css Loader in 2 min!

Hello

how to create an awesome loader easily

step 2: add CSS to your HTML

And that's it run the HTML file in the browser to see an awesome Loader