Lava Lamp Loader

<div class="ldr-lava-lamp" role="status" aria-label="Loading">
  <svg width="0" height="0" aria-hidden="true">
    <filter id="ldr-lava-lamp-goo" primitiveUnits="objectBoundingBox">
      <feGaussianBlur stdDeviation="0.1 0.05" />
      <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -10" />
    </filter>
  </svg>
  <div class="ldr-lava-lamp-wax"><span></span><span></span><span></span><span></span></div>
</div>

.ldr-lava-lamp {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  box-sizing: border-box;
  width: calc(var(--s) * 0.62);
  height: calc(var(--s) * 1.2);
  border: calc(var(--s) / 26) solid color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent);
  border-radius: calc(var(--s) * 0.31);
  background: linear-gradient(color-mix(in srgb, var(--ldr-color, #3b82f6) 4%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 18%, transparent));
  box-shadow: 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 30%, transparent);
  overflow: hidden;
}
.ldr-lava-lamp > svg {
  position: absolute;
}
.ldr-lava-lamp-wax {
  position: absolute;
  inset: 0;
  filter: url(#ldr-lava-lamp-goo);
}
.ldr-lava-lamp-wax::before,
.ldr-lava-lamp-wax::after,
.ldr-lava-lamp-wax span {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--c);
}
.ldr-lava-lamp-wax::before {
  left: -10%;
  right: -10%;
  bottom: -14%;
  height: 30%;
}
.ldr-lava-lamp-wax::after {
  left: 18%;
  right: 18%;
  top: -8%;
  height: 16%;
}
.ldr-lava-lamp-wax span {
  bottom: 6%;
  left: var(--x);
  width: var(--d);
  height: var(--d);
  animation: ldr-lava-lamp-rise var(--t) ease-in-out var(--delay) infinite;
}
.ldr-lava-lamp-wax span:nth-child(1) { --x: 16%; --d: calc(var(--s) * 0.26); --t: 4.2s; --delay: 0s; }
.ldr-lava-lamp-wax span:nth-child(2) { --x: 46%; --d: calc(var(--s) * 0.2); --t: 5.4s; --delay: -2.1s; }
.ldr-lava-lamp-wax span:nth-child(3) { --x: 28%; --d: calc(var(--s) * 0.3); --t: 6.2s; --delay: -4.4s; }
.ldr-lava-lamp-wax span:nth-child(4) { --x: 54%; --d: calc(var(--s) * 0.17); --t: 3.6s; --delay: -1.2s; }
@keyframes ldr-lava-lamp-rise {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(calc(var(--s) * -0.82)) scale(0.88, 1.14); }
}

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

Similar loaders