DEV Community

Rohit Sharma
Rohit Sharma

Posted on

5

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more