Simple Loading Text Animation CSS

A loading text animation is most commonly used to visualize waiting for a process to be done. Whether you’re working on a preloader screen or want to create a simple loading text animation using HTML and CSS, this project might be helpful for you.

How to Create a Simple Loading Text Animation CSS

1. Create a div element with a class name "loading-text" and place three span elements for dots inside it. Wrap all these elements into a div tag and define its class name "wrapper". Therefore, the following is the complete HTML structure for the loading text animation:

<div class="wrapper">
  <div class="loading-text"> <!--Loading-text-->
    <h1>LOADING
      <span class="dot-one"> .</span>
      <span class="dot-two"> .</span>
      <span class="dot-three"> .</span>
    </h1>
  </div> <!--/Loading-text-->
</div> <!-- /Wrapper -->

2. Use the following CSS to style the loader.

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body{
  background: #3498db !important;
  width: 100%;
  min-height: 400px;
  color: white;
}
h1.loading{
  font-size: 3em;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
span[class^="dot-"]{
  opacity: 0;
}
.dot-one{
  animation: dot-one 2s infinite linear
}
.dot-two{
  animation: dot-two 2s infinite linear
}
.dot-three{
  animation: dot-three 2s infinite linear
}
@keyframes dot-one{
  0%{
    opacity: 0;
  }
  15%{
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes dot-two{
  0%{
    opacity: 0;
  }
  25%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

@keyframes dot-three{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  75%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

That’s all! hopefully, you have successfully created a loading text animation. If you have any questions or suggestions, feel free to comment below.