Liquid Fill

<!-- Liquid Fill Progress
     Set the fill level via the inline height on __liquid -->
<div class="nuda-liquid-fill" role="progressbar"
     aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"
     aria-label="55% complete">
  <div class="nuda-liquid-fill__liquid" style="height: 55%">
    <div class="nuda-liquid-fill__wave"></div>
  </div>
</div>

/* Liquid Fill Progress
   Liquid filling animation from bottom with a wave effect.
   Customize: --liquid-color, --liquid-size, --liquid-border */

.nuda-liquid-fill {
  --liquid-color: #818cf8;
  --liquid-size: 48px;
  --liquid-border: rgba(255, 255, 255, 0.2);
  width: var(--liquid-size);
  height: var(--liquid-size);
  border-radius: 50%;
  border: 2px solid var(--liquid-border);
  overflow: hidden;
  position: relative;
}

.nuda-liquid-fill__liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--liquid-color);
  transition: height 0.4s ease;
}

.nuda-liquid-fill__wave {
  position: absolute;
  top: -6px;
  left: -50%;
  width: 200%;
  height: 12px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  animation: nuda-liquid-wave 2s linear infinite;
}

@keyframes nuda-liquid-wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-liquid-fill__wave {
    animation: none;
    opacity: 0.5;
  }
}