Glassmorphism 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 ke…


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 -

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>

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);
  }
}

Try it on 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.


This content originally appeared on DEV Community and was authored by Jatin Sharma


Print Share Comment Cite Upload Translate Updates
APA

Jatin Sharma | Sciencx (2021-10-27T06:16:15+00:00) Glassmorphism Loading Animation. Retrieved from https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/

MLA
" » Glassmorphism Loading Animation." Jatin Sharma | Sciencx - Wednesday October 27, 2021, https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/
HARVARD
Jatin Sharma | Sciencx Wednesday October 27, 2021 » Glassmorphism Loading Animation., viewed ,<https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/>
VANCOUVER
Jatin Sharma | Sciencx - » Glassmorphism Loading Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/
CHICAGO
" » Glassmorphism Loading Animation." Jatin Sharma | Sciencx - Accessed . https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/
IEEE
" » Glassmorphism Loading Animation." Jatin Sharma | Sciencx [Online]. Available: https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/. [Accessed: ]
rf:citation
» Glassmorphism Loading Animation | Jatin Sharma | Sciencx | https://www.scien.cx/2021/10/27/glassmorphism-loading-animation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts