DEV Community 👩‍💻👨‍💻

Cover image for Glassmorphism Circle Loading Animation
Jatin Sharma
Jatin Sharma

Posted on

Glassmorphism Circle Loading Animation

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.


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


/* Main Loader */
.loader {
  position: relative;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
  animation: circleAnimation 1s linear infinite;

.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);
Enter fullscreen mode Exit fullscreen mode

Codepen is Here


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)

🌚 Turn on dark mode

🔠 Change your default font

📚 Adjust your experience level to see more relevant content

Head to your account's Settings to do all this and more.