CSS Loading animation | name animation using css

CSS Loading animation | name animation using css




CSS Loading animation | name animation using css



Welcome🎉 to codewithrandom blog in this blog we learn that how we how to create CSS Loading animation . We use HTML & css for this CSS Loading animation .  Hope you enjoy our blog so let's start with a basic HTML structure for CSS Loading animation.

HTML code for CSS Loading animation

 <section>  
  <div class="container">  
   <h1>CODEWITHRANDOM...</h1>  
  </div>  
 </section>  
There is all HTML code for CSS Loading animation  . Now you can see output without css then we write css for our CSS Loading animation.

CSS Loading animation | name animation using css

CSS for CSS Loading animation    

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Montserrat";  
 }  
 section {  
  min-height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: aliceblue;  
 }  
 .container {  
  padding: 20px 40px;  
  border: 2px solid black;  
  letter-spacing: 10px;  
  position: relative;  
  text-transform: uppercase;  
  font-size: 24px;  
 }  
 .container::after {  
  content: "";  
  position: absolute;  
  height: 100%;  
  width: 0%;  
  left: 0;  
  top: 0;  
  background-color: rgb(255, 255, 255);  
  mix-blend-mode: difference;  
  animation: loader_bg 3s linear infinite alternate;  
 }  
 @keyframes loader_bg {  
  0% {  
   width: 0;  
  }  
  100% {  
   width: 100%;  
  }  
 }  
Now we complete our css section,  Here is our updated output with css.

Post a Comment

Previous Post Next Post