An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
Quick CSS : Make infinity loading animation for your next website.
Hello, welcome. Today we'll see a quick CSS tutorial on how to make gradient loading animation.
Loading Animation
Wonder, how to make a loading animation ? Let's see how you can make one very easily.
Video Tutorial
Let's start
So, start with basic HTML structure. And after that, create a <div>
with class loading-box
it will contain our loader. And inside that, create another <div>
with class loader
.
<div class="loading-box"> <div class="loader"></div></div>
And for styling first, give basic style.
*{ 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 are using flex box to center our loading box.
Output
Now, style loader.
.loader{ width: 100%; height: 100%; position: absolute; border-radius: 50px; background: linear-gradient(45deg, #b6b5ff, #ff9797); left: 0%;}
Output
You can see we are done with the loader, Now let's animate this. As you can notice, we have left
property set to 0%
change it to -100%
and give animation.
.loader{ left: -100%; animation: load 3s linear infinite;}@keyframes load{ 0%{ left: -100%; } 100%{ left: 100%; }}
Output
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.
Original Link: https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To