This content originally appeared on DEV Community and was authored by Rohit Sharma
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>
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%
}
}
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.
This content originally appeared on DEV Community and was authored by Rohit Sharma
Rohit Sharma | Sciencx (2021-12-02T13:38:00+00:00) Slider Animation HTML and CSS only. Retrieved from https://www.scien.cx/2021/12/02/slider-animation-html-and-css-only/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.