Last active
April 12, 2019 17:29
-
-
Save jashaj/1b898be25122fe4618fa121b05fbb55e to your computer and use it in GitHub Desktop.
Progress bar that counts back to 0.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en" xml:lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Count down</title> | |
| <style> | |
| progress { | |
| display: block; | |
| margin: 1em 0; | |
| border-radius: 1em; | |
| } | |
| progress[value]::-webkit-progress-bar { | |
| background-color: #eee; | |
| border-radius: 1em; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; | |
| } | |
| progress[value]::-moz-progress-bar { | |
| background-color: navy; | |
| border-radius: 1em; | |
| } | |
| progress[value] { | |
| /* Reset the default appearance */ | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| /* Get rid of default border in Firefox. */ | |
| border: none; | |
| border-radius: 1em; | |
| /* Dimensions */ | |
| width: 250px; | |
| height: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| Count down | |
| </h1> | |
| <progress id="timer" value=90 max=90 aria-hidden="true"></progress> | |
| <label for="timer">You have <time id="timeLeft">1m 30s</time> left</label> | |
| <script> | |
| const timer = document.getElementById('timer'); | |
| const timeLeft = document.getElementById('timeLeft'); | |
| let secondsLeft = Number.parseInt(timer.getAttribute('max')); | |
| const countBackId = window.setInterval(countBack, 1000); | |
| function formatReadableTime() { | |
| const minutes = Math.floor(secondsLeft / 60); | |
| const seconds = secondsLeft % 60; | |
| const secondsPrefix = seconds <= 9 ? '0' : ''; | |
| return minutes > 0 ? `${minutes}m ${secondsPrefix}${seconds}s` : `${seconds}s`; | |
| } | |
| function countBack() { | |
| if (secondsLeft > 0) { | |
| secondsLeft--; | |
| timer.value = secondsLeft; | |
| timeLeft.textContent = formatReadableTime(secondsLeft); | |
| } | |
| } | |
| if (timeLeft === 0) { | |
| window.clearInterval(countBackId); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment