Skip to content

Instantly share code, notes, and snippets.

@elwinschmitz

elwinschmitz/hourglass.html

Created November 2, 2020 09:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elwinschmitz/fe2b1f4548d6de424bbc598a1a06a68d to your computer and use it in GitHub Desktop.
Save elwinschmitz/fe2b1f4548d6de424bbc598a1a06a68d to your computer and use it in GitHub Desktop.
Download ZIP
Visual timer / progress-meter / hourglass
Raw
hourglass.html
<!doctype html>
<title>⌛️</title>
<style>
:root {
--timespan: calc(1 * 60s);
}
html, body {
height: 100%;
background: black;
margin: 0;
}
body::after {
content: '';
display: block;
height: 0;
background: gold;
transition: height var(--timespan) linear;
}
body.run::after {
height: 100%;
}
</style>
<body onclick="document.body.classList.toggle('run')"></body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment