CSS Loading Text Animations

In this post, I will list some CSS loading text animations that can be used on any website. This is a great way to add some extra flair to your website while the page is loading. You will need basic knowledge of CSS animation to follow these snippets.

<span class="loading">Loading</span>
<style>
.loading {
font-size: 64px;
font-weight: bold;
display: inline-block;
color: #6667ab;
position: relative;
}
.loading::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #a0c5e7;
width: 100%;
height: 100%;
overflow: hidden;

animation: loading 3s linear infinite;
}
@keyframes loading {
0% {
height: 100%;
}
100% {
height: 0%;
}
}
</style>

<span class="loading">Loading</span>
<style style="text/css">
.loading {
font-size: 64px;
font-weight: bold;
display: inline-block;
color: #a0c5e7;
position: relative;
}
.loading::after {
content: 'Loading';
position: absolute;
left: 0;
top: 0;
color: #6667ab;
width: 100%;
height: 100%;
overflow: hidden;

animation: loading 3s linear infinite;
}
@keyframes loading {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>

<span class="loading"></span>
<style type="text/css">
.loading{
font-size: 64px;
font-weight: bold;
color: #6667ab;
display: inline-block;
position: relative;
}
.loading::before{
content: '';
animation: 1s typing linear infinite;
}
@keyframes typing {
0% { content: 'L'}
10% { content: 'Lo'}
20% { content: 'Loa'}
30% { content: 'Load'}
40% { content: 'Loadi'}
50% { content: 'Loadin'}
60% { content: 'Loading'}
70% { content: 'Loading.'}
80% { content: 'Loading..'}
100% { content: 'Loading...'}
}
</style>

<span class="loading"></span>
<style type="text/css">
.loading{
font-size: 64px;
font-weight: bold;
color: #6667ab;
animation: blurLoading 2s ease-in-out infinite alternate;
text-shadow: 0 0 1px white;
letter-spacing: 1px;
}
.loading:before {
content: "Loading";
}
@keyframes blurLoading {
100% {
opacity: 0.15;
filter: blur(3px);
letter-spacing: 5px;
}
}
</style>