Open experiment
Liquid progress loader
A compact determinate loader that keeps a native progress element and visible percentage while layering a clipped liquid surface above it. The motion reinforces progress but disappears cleanly under reduced-motion preferences.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-liquid-progress">
<div class="cmp-liquid-progress__head"><strong>Uploading assets</strong><span>68%</span></div>
<div class="cmp-liquid-progress__capsule">
<progress value="68" max="100">68%</progress>
<span aria-hidden="true"><i></i><b></b></span>
</div>
<small>14 of 21 files safely transferred</small>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- A native progress element exposes current and maximum values.
- The percentage remains visible as text.
- Liquid movement is decorative and stops under reduced motion.
License: MIT License for open-source use, modification, and distribution.