Skip to content

Instantly share code, notes, and snippets.

@andronov04
Created August 5, 2023 16:21
Show Gist options
  • Save andronov04/cc9ad37a1900d8c63b3d442eba20f9b5 to your computer and use it in GitHub Desktop.
Save andronov04/cc9ad37a1900d8c63b3d442eba20f9b5 to your computer and use it in GitHub Desktop.
Water Wave Filling Box with Animation - Autoscales
<div class="indicator">
<output name="result" for="completion">50</output>
</div>
<input id="completion" type="range" min="0" max="100">
const input = document.querySelector("input");
const indicator = document.querySelector(".indicator");
const output = document.querySelector("output");
input.addEventListener("input", (e) => {
setValue(e.target.value);
});
function setValue(val) {
output.value = val;
indicator.setAttribute(
"style",
`
--completion: ${val}%
`
);
}
:root {
--completion: 50%;
/*The top offset for the wave*/
--offset: 2vh;
}
body {
display: grid;
place-content: center;
height: 100vh;
background: #333;
}
.indicator {
height: 20vh;
width: 20vh;
position: relative;
border-radius: 50%;
border: 4px double white;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: white;
}
output {
z-index: 1;
font-family: system-ui;
font-size: 10vh;
color: #333;
}
.indicator::after {
display: block;
width: 40vh;
height: 40vh;
content: "";
background-color: #a4eafd;
border-radius: 15vh;
position: absolute;
left: 50%;
top: calc(100% - var(--completion) + var(--offset));
translate: -50% 0;
animation: spin 5s linear infinite;
}
@keyframes spin {
100% {
rotate: 360deg;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment