Css Loading Animation With Text | Only Html Css – Codewithrandom

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

Css Loading Animation With Text | Only Html Css - Codewithrandom
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

Css Loading Animation With Text | Only Html Css - Codewithrandom

Css Loading Animation With Text | Only Html Css - Codewithrandom

We have completed our CSS section,  Here is our updated output with CSSHope you like the Css Loading Animation With Text, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you ๐Ÿ™๐Ÿ’•

This post teaches us to create a Css Loading Animation With Text using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Yunus Ekim

Check out more…..



Share on:

Leave a Comment