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 Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay