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.
Top comments (0)