Rising Bubbles Loader

<div class="ldr-rising-bubbles" role="status" aria-label="Loading">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

.ldr-rising-bubbles {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to top, color-mix(in srgb, var(--ldr-color, #3b82f6) 40%, transparent), color-mix(in srgb, var(--ldr-color, #3b82f6) 6%, transparent));
  box-shadow: inset 0 0 0 calc(var(--s) / 22) color-mix(in srgb, var(--ldr-color, #3b82f6) 60%, transparent), 0 0 calc(var(--s) / 4) color-mix(in srgb, var(--ldr-color, #3b82f6) 25%, transparent);
}
.ldr-rising-bubbles span {
  position: absolute;
  bottom: 0;
  left: var(--x);
  box-sizing: border-box;
  width: var(--d);
  height: var(--d);
  border: calc(var(--s) / 32) solid var(--c);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--c) 25%, #fff) 0 16%, color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent) 24%);
  opacity: 0;
  animation: ldr-rising-bubbles-rise var(--t) cubic-bezier(0.45, 0, 0.75, 0.6) var(--delay) infinite,
    ldr-rising-bubbles-wobble 0.7s ease-in-out var(--delay) infinite alternate;
}
.ldr-rising-bubbles span:nth-child(1) { --x: 16%; --d: calc(var(--s) * 0.2); --t: 2.4s; --delay: 0s; }
.ldr-rising-bubbles span:nth-child(2) { --x: 54%; --d: calc(var(--s) * 0.13); --t: 1.9s; --delay: -0.8s; }
.ldr-rising-bubbles span:nth-child(3) { --x: 34%; --d: calc(var(--s) * 0.25); --t: 2.8s; --delay: -1.6s; }
.ldr-rising-bubbles span:nth-child(4) { --x: 62%; --d: calc(var(--s) * 0.17); --t: 2.2s; --delay: -1.2s; }
.ldr-rising-bubbles span:nth-child(5) { --x: 26%; --d: calc(var(--s) * 0.11); --t: 1.7s; --delay: -0.4s; }
.ldr-rising-bubbles span:nth-child(6) { --x: 46%; --d: calc(var(--s) * 0.18); --t: 2.5s; --delay: -2s; }
.ldr-rising-bubbles span:nth-child(7) { --x: 70%; --d: calc(var(--s) * 0.1); --t: 1.6s; --delay: -0.9s; }
@keyframes ldr-rising-bubbles-rise {
  0%   { transform: translateY(100%) scale(0.5); opacity: 0; }
  12%  { opacity: 1; }
  82%  { transform: translateY(calc(var(--s) * -0.72)) scale(1); opacity: 1; }
  100% { transform: translateY(calc(var(--s) * -0.82)) scale(1.5); opacity: 0; }
}
@keyframes ldr-rising-bubbles-wobble {
  from { translate: calc(var(--s) * -0.04) 0; }
  to   { translate: calc(var(--s) * 0.04) 0; }
}

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

Similar loaders