Hello and welcome! Today, we'll will see how to create a gradient loading animation using HTML and CSS
.jpg)
HTML
Start with basic HTML structure. First, create a <div> with the class loading-box, which will contain our loader. Inside that, add another <div> with the class loader.
<div class="loading-box">
<div class="loader"></div>
</div>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fefefe;
}
.loading-box{
position: relative;
width: 400px;
height: 50px;
border-radius: 50px;
border: 2px solid #ededed;
overflow: hidden;
}
In above CSS, we're using Flexbox to center our loading-box.
Now, style loader.
.loader{
width: 100%;
height: 100%;
position: absolute;
border-radius: 50px;
background: linear-gradient(45deg, #b6b5ff, #ff9797);
left: 0%;
} 
Now that the loader is ready, let's animate it. You’ll notice the
left property is currently set to 0%. Change it to -100% and add
the animation to bring it to life.
.loader{
left: -100%;
animation: load 3s linear infinite;
}
@keyframes load{
0%{
left: -100%;
}
100%{
left: 100%;
}
}
So, it's done. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.
Articles you may found Useful
If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe
Thanks For reading.
.jpg&description=Infinity loading animation using HTML and CSS){kind=link}