This content originally appeared on DEV Community and was authored by Jatin Sharma
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 -
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 .loader.
HTML
<div class="loader"></div>
CSS
/* Main Loader */
.loader {
position: relative;
width: 180px;
height: 180px;
overflow: hidden;
border-radius: 50%;
animation: circleAnimation 1s linear infinite;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
}
/* Glassmorphism */
.loader::before {
inset: 10px;
background: rgba(233, 30, 99, 0.05);
border-radius: 50%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
z-index: 1;
}
/* animated Circle */
.loader::after {
top: -50%;
left: -50%;
width: 100%;
height: 100%;
background: #ff6198;
}
@keyframes circleAnimation {
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, because I am gonna build more things like this.
You can now extend your support by buying me a Coffee.😊👇
Also Read
- 10 CSS Resources that you should bookmark
- Some Strange Concept of JavaScript
- Some Javascript Methods you should know
This content originally appeared on DEV Community and was authored by Jatin Sharma
Jatin Sharma | Sciencx (2021-11-02T05:29:03+00:00) Glassmorphism Circle Loading Animation. Retrieved from https://www.scien.cx/2021/11/02/glassmorphism-circle-loading-animation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.