Home » Awesome CSS Loading Animation with Text

Awesome CSS Loading Animation with Text

by techmidpoint
Awesome CSS Loading Animation with Text

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

You may also like

Leave a Comment