4.6K
Awesome CSS Loading Animation with Text
Hello, guys welcome back to you another tutorial of techmidpoint. In this tutorial, I have brought another Awesome CSS Loading Animation with Text. I hope you will like it. Please don’t forget to share it on social media.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Responsive navigation menu bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<div class="loader_inner">L</div>
<div class="circle_1">
<div class="circle_2"></div>
</div>
<div class="loader_inner_1">ADING</div>
</div>
</body>
</html>
CSS
body{
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background: #333;
}
.loader{
font-family: 'Oswald', sans-serif;
font-size: 100px;
line-height: 100px;
width: 380px;
height: 110px;
margin: 30px auto 0;
position: relative;
}
.loader_inner,
.loader_inner_1{
color: #2d801c;
text-shadow: 0 1px 0 #2ff308,
0 2px 0 #2ff308,
0 3px 0 #2ff308,
0 4px 0 #2ff308,
0 5px 0 #2ff308,
0 6px 0 #2ff308,
0 6px 3px #000;
position: absolute;
top: 0;
left: 0;
}
.loader_inner_1{ left: 140px; }
.circle_1{
width: 80px;
height: 80px;
border-radius: 80px 0 0 80px;
border-left: solid 5px #2ff308;
position: absolute;
top: 20px;
left: 50px;
animation: spin 1s infinite linear;
}
.circle_2{
width: 50px;
height: 50px;
border-radius: 50px 0 0 50px;
border-left: 5px solid #2d801c;
position: relative;
top: 15px;
left: 15px;
animation: spin 3s infinite linear;
}
@keyframes spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
For More Tutorials Please Click Here
