Loading Amiation

In this example below you will see how to do a Loading Amiation with some HTML / CSS and Javascript

This is the Animate In loading text

Thumbnail
This awesome code was written by Arif_Iqbal, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Arif_Iqbal ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Loading Amiation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

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

</body>

</html>

/*Downloaded from https://www.codeseek.co/Arif_Iqbal/loading-amiation-ZGwLQv */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
body{
  background: #3498db;
  width: 100%;
  height: 100%;
  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;
  }
}

Comments