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>
Top comments (0)