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)