Back

Loader - Text loading

Tutorial on how to create a loader inside a text - CSS only.

HTML

For HTML we need two "loading" texts inside of a container with class "loader". One will represent the text and the other will animate.


        <div class="loader">
          <span>LOADING</span>
          <span>LOADING</span>
        </div>

CSS

For CSS, first we'll style the container. We'll just set position to relative so that we can position properly the elements inside.


        .loader {
          position: relative;
        }

Now we'll style "loading" texts inside of a container. We'll set position to absolute and transform translate X and Y to -50%, to position elements in the center. We'll increase the font and set it's size to 50 pixels and weight to 600.


        .loader span {
          position: absolute;
          transform: translate(-50%, -50%);
          font-size: 50px;
          font-weight: 600;
        }

Now we'll style only the first text element (the one that represents the text). We'll set it's color to transparent, and display only the borders of the text by setting text-stroke property.


        .loader span:nth-child(1) {
          color: transparent;
          -webkit-text-stroke: 1px rgb(27, 27, 27);
        }

Now we'll style the second text element (the one that animates). We'll only set it's color to yellow.


        .loader span:nth-child(2) {
          color: rgb(181, 255, 22);
        }

Now we'll create the animation for the second text. Using clip-path, we'll create two different shapes. The one we'll set at the beginning and at the end od the animation, and the other at 50%.


        @keyframes waves {
          0%, 100% {
            clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
          }
          50% {
            clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
          }
        }

Now we'll add our animation to the second text element and set it's duration to 2 seconds with infinite iteration count.


        .loader span:nth-child(2) {
          color: rgb(181, 255, 22);
          animation: waves 3s infinite;  /* Added animation */
        }

And that's it.

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

<div class="loader">
  <span>LOADING</span>
  <span>LOADING</span>
</div>

<style>
.loader {
  position: relative;
}

.loader span {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 50px;
  font-weight: 600;
}

.loader span:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 1px rgb(27, 27, 27);
}

.loader span:nth-child(2) {
  color: rgb(181, 255, 22);
  animation: waves 3s infinite;
}

@keyframes waves {
  0%, 100% {
    clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
  }
}

</style>

Thank you for reading this article.

Loader - Text loading

HTML

CSS

Video tutorial

Whole code

More loaders

Similar

See also