Ghost Loader

<div class="ldr-ghost" role="status" aria-label="Loading">
  <span class="ldr-ghost-body"><span class="ldr-ghost-eyes"></span></span>
  <span class="ldr-ghost-shadow"></span>
</div>

.ldr-ghost {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-ghost-body {
  position: absolute;
  left: 22%;
  top: 8%;
  width: 56%;
  height: 56%;
  border-radius: calc(var(--s) * 0.28) calc(var(--s) * 0.28) 0 0;
  background: var(--c);
  animation: ldr-ghost-float 2.4s ease-in-out infinite;
}
.ldr-ghost-body::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--s) * 0.1);
  background: radial-gradient(circle calc(var(--s) * 0.094) at 50% 0, var(--c) 96%, transparent) 0 0 / calc(100% / 3) 100% repeat-x;
  animation: ldr-ghost-hem 0.9s linear infinite;
}
.ldr-ghost-eyes {
  position: absolute;
  top: 36%;
  left: 24%;
  width: 16%;
  height: 22%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 25%, #000);
  box-shadow: calc(var(--s) * 0.16) 0 0 color-mix(in srgb, var(--c) 25%, #000);
  animation: ldr-ghost-look 2.4s ease-in-out infinite;
}
.ldr-ghost-shadow {
  position: absolute;
  left: 30%;
  bottom: 4%;
  width: 40%;
  height: 7%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
  animation: ldr-ghost-shadow 2.4s ease-in-out infinite;
}
@keyframes ldr-ghost-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(calc(var(--s) * -0.1)) rotate(3deg); }
}
@keyframes ldr-ghost-hem {
  to { background-position: calc(var(--s) * 0.56 / 3) 0; }
}
@keyframes ldr-ghost-look {
  0%, 20%, 100% { transform: translateX(0) scaleY(1); }
  30%, 45%      { transform: translateX(calc(var(--s) * 0.05)) scaleY(1); }
  48%           { transform: translateX(calc(var(--s) * 0.05)) scaleY(0.1); }
  51%, 65%      { transform: translateX(calc(var(--s) * 0.05)) scaleY(1); }
  75%, 90%      { transform: translateX(calc(var(--s) * -0.03)) scaleY(1); }
}
@keyframes ldr-ghost-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(0.7); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-ghost, .ldr-ghost *, .ldr-ghost::before, .ldr-ghost::after, .ldr-ghost *::before, .ldr-ghost *::after {
    animation-duration: 3s;
  }
}

Similar loaders