I'm struggling to find a way to create a progress bar that empties as it gets closer to the countdown date.
I came across two different examples that I think could be merged, but I'm not sure how to do it:
Countdown - https://www.jqueryscript.net/time-clock/Minimal-jQuery-Any-Date-Countdown-Timer-Plugin-countdown.html (1st example, SIMPLE TEXT COUNTDOWN)
Progress bar - https://jsfiddle.net/zessx/4PKEB/1/:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function progress(timeleft, timetotal, $element) {
var progressBarWidth = (timeleft / timetotal) * $element.width();
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " seconds to go");
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(20, 20, $('#progressBar'));
});
</script>
<style>
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px;
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
</style>
<div id="progressBar">
<div></div>
</div>UPDATE QUESTION
Let me explain further what I am looking for.
I want to combine the code from both links to achieve something like this:
https://i.sstatic.net/tEUzG.png
Essentially, I want the countdown text (circled in blue) to correspond with the decreasing color (circled in red) in the progress bar.
In short, I need a progress bar with text showing the countdown of days, hours, minutes, and seconds until a specific date rather than for a set duration.
My complete HTML is:
<!doctype html>
<html>
...
Any assistance would be greatly appreciated!