liquidspinner.css

/* needs some finalisation for implementation, but basicly accepts 2 divs, .spinner-wrapper with the .spinner chile within it. */

.spinner-wrapper{
  &::before{
    content:"";
    position:absolute;
    background:linear-gradient(112deg, #9894c8, #373570);
    width:300px;
    height:300px;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
}

.spinner{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  position: relative;
  background:white;
  filter: blur(12px) contrast(18);
  mix-blend-mode: screen;
}
.spinner:before, .spinner:after{
  width:60px;
  height:60px;
  border-radius:100%;
  background-color:#000;
  content: "";
  position: absolute;
}
.spinner:before{
  animation: spinLeft 2s ease-in-out infinite;
}
.spinner:after{
  animation: spinRight 2s ease-in-out infinite;
}

@keyframes spinLeft{
  from{
    transform: rotate(0deg) translate(50px);
  }
  to{
    transform: rotate(360deg) translate(50px);
  }
}
@keyframes spinRight{
  from{
    transform: rotate(360deg) translate(-50px);
  }
  to{
    transform: rotate(0deg) translate(-50px);
  }
}