DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Slider Animation HTML and CSS only

Hey Guys, Today I'm here with new post in which we are going to learn how we can create a CSS loading animation like this

As you all know, in Loading Animation type CSS project the HTML part is not so hard to understand and is of couple of lines. So, let's check it out.

HTML

<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="center-div">
      <h1>~LOADING~</h1>
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS

Now check out the CSS part. In this we use pseudo selector and @keyframes to animate that moving vertical line.

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html{
  font-size:62.5%;
}
.center-div{
  width:100vw;
  height:100vh;
  background-color: #2f3542;
  display:grid;
  place-items:center;
}
h1{
  color:white;
  position:relative;
  font-size:8rem;
  font-family: 'Indie Flower', cursive;
}
h1::before{
  content:"~LOADING~";
  width:100%;
  color:#2ed573;
  position:absolute;
  top:0;
  left:0;
  border-right:0.4rem solid #2ed573;
  animation:slide 2s linear infinite;
  overflow:hidden
}
@keyframes slide{
  0%{
    width:0%;
  }
  50%{
    width:100%;
  }
  100%{
    width:0%
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it guys. Our Loading Animation is ready and you are free to modify it as you wish.

If you loved this post then make sure to Like the post.

And also check out my previous posts. They may also be helpful for you.

Discussion (0)