Table of Contents
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.
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%;
}
}