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.

Loading
<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>
Loading
<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>