Text Loading Animation Using HTML & CSS

 

Welcome To The Codewithrandom Blog. We Learn How To Create A Text Loading Animation CSS. We Use HTML For Creating Text Structure And CSS  For Text Loading Animation.

Hope You Enjoy Our Blog So Let’s Start With A Basic Html Structure For The Text Loading Animation.

Html Code For Text Loading Animation

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

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

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Only HTML Code Output

blank output with blank html tag

 

CSS Code For Text Loading Animation

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 Text Loading Animation Using HTML and CSS Code.

Portfolio Website using HTML and CSS (Source Code)

Final Output Of Text Loading Animation