It's Loading _ HTML CSS . If you want to learn this copy the code below.
Copy the below HTML code
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 data-text="It's loading…">It's loading…</h1>
</body>
</html>
Copy the below CSS code
CSS
body {
background: #aab23c;
font-family: sans-serif;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
h1 {
position: relative;
color: #0000004d;
font-size: 60px
}
h1:before {
content: attr(data-text);
position: absolute;
overflow: hidden;
max-width: 7em;
white-space: nowrap;
color: #fff;
animation: loading 8s linear;
}
@keyframes loading {
0% {
max-width: 0;
}
}
