Css Loading Animation With Text | Only Html Css – Codewithrandom

Welcome🎉 to Code With Random blog. We learn how to create a Css Loading Animation With Text. We use HTML & CSS  forCss Loading Animation With Text. Hope you enjoy our blog so let’s start with a basic HTML structure for the Css Loading Animation With Text.  

HTML code

 <div class="loading" data-loading-text="WEBDEVLESSONS..."></div>  

There is all HTML code for the Css Loading Animation With Text. Now, you can see output without CSS, then we write CSS for the Css Loading Animation With Text.

Output

blank output with blank html tag

CSS code

 body {  
       background: #eee;  
 }  
  .loading {  
       left: 50%;  
       top: 50%;  
       font-size: 36px;  
       font-family: serif;  
       font-weight: bold;  
       letter-spacing: 4.4px;  
       text-transform: capitalize;  
       position: absolute;  
       overflow: hidden;  
       transform: translate(-50%, -60%);  
 }  
  .loading:before {  
       color: #aaa;  
       content: attr(data-loading-text);  
 }  
  .loading:after {  
       top: 0;  
       left: 0;  
       width: 0;  
       opacity: 1;  
       color: #444;  
       overflow: hidden;  
       position: absolute;  
       content: attr(data-loading-text);  
       animation: loading 5s infinite;  
 }  
  @keyframes loading {  
       0% {  
            width: 0;  
      }  
       100% {  
            width: 100%;  
      }  
 }  

We have completed our CSS section,  Here is our final updated output CSS.

Final Output