.loader {
  --s: -100vmax;
  height: 40vmin;
  aspect-ratio: 1;
  position: relative;
  clip-path: polygon(evenodd,var(--s) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) var(--s),100% 50%,85.36% 85.36%,50% 100%,14.64% 85.36%,0% 50%,14.64% 14.64%,50% 0%,85.36% 14.64%,100% 50%,74.75% 25.25%,50% 15%,25.25% 25.25%,15% 50%,25.25% 74.75%,50% 85%,74.75% 74.75%,85% 50%,74.75% 25.25%,100% 50%);
}
.loader:before {
  content: "";
  position: absolute;
  inset: 0 35% 70%;
  border-radius: 50%;
  background: #0b486b;
  filter: blur(8vmin);
  transform-origin: 50% 165%;
  animation: l12 1.5s linear infinite;
}
@keyframes l12 {
  to {rotate: 1turn}
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: repeating-linear-gradient(45deg,#0000 0 40px, #f9f9f9 0 80px);
}