An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Mashable
- Simplebits
- Team Treehouse
- TutsPlus - Design
- Vandelay Design
- Creative Curio
- Crazy Leaf Design
- Line 25
- Specky Boy
- Android Dissected
Help Webnuz
Referal links:
October 22, 2021 05:50 pm GMT
Original Link: https://dev.to/j471n/css-gradient-loading-animation-2695
CSS Gradient Loading Animation
In this article we are gonna build a loading spinner for you website stay tuned for that first let's look what are we building -
We just need simple div to create this animation. For this animation we have used pseudo classes and a normal keyframe in which we just rotate the div.
HTML
<div class="loader"></div>CSS
.loader { position: relative; width: 200px; height: 200px; border-radius: 10rem; border: 3px solid white; background: linear-gradient(#eb31b0, #e4c352, #7df8d6); box-shadow: 0px 0px 100px -50px black; animation: animate 1s linear infinite;}.loader::before { position: absolute; content: ""; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 10rem; border: 3px solid white; box-shadow: inset 0px 0px 100px -70px #111;}@keyframes animate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}Codepen is Here
Conclusion
So after that you can use it anywhere in your project. And let me know what do you think about it. If you like it then consider a follow.
Original Link: https://dev.to/j471n/css-gradient-loading-animation-2695
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To