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>
Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close