Liquid Loading

Build a liquid loading animation: a round vessel that fills with water as progress goes from 0 to 100%. Structure: an SVG about 140px square. A circle outline (2px, text color). Inside it, a clip path shaped like the circle (a few px smaller) containing the liquid. A percentage counter in the center in a monospace font, around 20% of the vessel size. The liquid: two wave paths, each a sine curve sampled every 1/24 of the width and closed down to the bottom. The water line y = size * (1 - progress). Wave amplitude about 4.5% of the size. - Front wave: full accent color, frequency 1.2 cycles across the vessel. - Back wave: accent at 40% opacity, frequency 1, 80% of the amplitude, phase running the OPPOSITE way with an offset. Move the phase continuously with time (about 3.2 radians per second) using requestAnimationFrame. The opposing waves are what makes it look like water. The counter: draw the percentage twice. First in the text color. Then again in white inside a group clipped to the FRONT wave's path. Where the liquid covers a digit, that part of it turns white, even mid-digit. Progress: in a real app, feed it your actual loading progress. For a demo, simulate a believable load over ~3.4s with keyframes (time, progress): (0,0), (0.22,0.30), (0.42,0.45), (0.58,0.48), (0.80,0.86), (1,1), with smoothstep easing between keys. Compute the counter from the SAME value as the water line in the same frame, so they never disagree. Finish: at 100%, calm the waves by easing the amplitude to 0 over 500ms, then STOP the animation frame loop. Under the vessel, a status line changes from "Uploading…" to a check icon plus "Done" in the success color. Accessibility: wrap the SVG in an element with role="progressbar", aria-valuemin 0, aria-valuemax 100, aria-valuenow, and an aria-label naming the task ("Uploading acme-brand.zip"). The SVG itself is aria-hidden. The status line is aria-live="polite". Under prefers-reduced-motion, draw a flat surface (amplitude 0) at the true level with no phase motion. Colors as tokens: accent for the liquid, surface inside the vessel, text for the outline and dry digits, on-primary for submerged digits, success only for "Done" with its icon. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.