Liquid Fill

<!-- Liquid Fill Progress (set fill via inline height on __liquid) -->
<div class="nuda-liquid-fill-progress" role="progressbar"
     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
     aria-label="60% complete">
  <div class="nuda-liquid-fill-progress__liquid" style="height: 60%">
    <div class="nuda-liquid-fill-progress__wave"></div>
  </div>
</div>

/* Liquid Fill Progress
   A wavy liquid surface; the wave bob is driven by transform (translate + rotate).
   Set the fill level with the inline height on __liquid.
   Customize: --liquidfillp-color, --liquidfillp-size */

.nuda-liquid-fill-progress {
  --liquidfillp-color: rgba(228, 255, 84, 0.85);
  --liquidfillp-size: 52px;
  position: relative;
  width: var(--liquidfillp-size);
  height: var(--liquidfillp-size);
  border-radius: 50%;
  border: 2px solid rgba(228, 255, 84, 0.3);
  overflow: hidden;
}

.nuda-liquid-fill-progress__liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--liquidfillp-color);
}

.nuda-liquid-fill-progress__wave {
  position: absolute;
  top: -9px;
  left: -50%;
  width: 200%;
  height: 18px;
  background: var(--liquidfillp-color);
  border-radius: 45%;
  animation: nuda-liquid-fill-progress 2.2s linear infinite;
  will-change: transform;
}

@keyframes nuda-liquid-fill-progress {
  0%   { transform: translateX(0)   rotate(0deg); }
  100% { transform: translateX(25%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-liquid-fill-progress__wave { animation: none; }
}