DEV Community

Cover image for Glassmorphism Loading Animation
Jatin Sharma
Jatin Sharma

Posted on

Glassmorphism Loading Animation

#css #webdev #beginners #tutorial

In this article we are gonna build a loading spinner with the glassmorphism, stay tuned for that first let's look what are we building -

preview

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 translate the ::before and ::after

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

/* Main Loader */ .loader { position: relative; width: 180px; height: 180px; } .loader::before, .loader::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } /* Loader Blue Circle */ .loader::before { background: #5989ff; animation: animate 2s ease-in-out infinite; } /* Loader Glassmorphism */ .loader::after { background: rgba(56, 109, 241, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); animation: animate 2s ease-in-out infinite; z-index: 1; animation-delay: -1s; } /* Animation */ @keyframes animate { 0%, 100% { transform: translateX(-80px); } 50% { transform: translateX(80px); } }
Enter fullscreen mode Exit fullscreen mode

Codepen -

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, because I am gonna build more things like this.

You can now extend your support by buying me a Coffee.😊👇

Buy Me A Coffee

Also Read

Top comments (0)