Text Loading Animation Using HTML and CSS
Welcome To The Codewithrandom Blog. In this blog, we learn how to create a Text Loading Animation Using CSS. In this Animation, we have text Loading and it comes in a letter-by-letter with fade Animation.
| Code by | Yunus Ekim |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | No |
| Responsive | Yes |
50+ HTML, CSS & JavaScript Projects With Source Code
I 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
We have completed our Text Loading Animation. Here is our updated output with Html and Css. Hope you like the Text Loading Animation Using HTML and CSS. You can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
Build a Quiz App With HTML ,CSS and JavaScript
Thank you!
This post teaches us to create a Text Loading Animation using simple HTML and 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
Which code editor do you use for this Text Loading Animation Using coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
