Progress bar of today between dates

Set start date and end date, and the JS and CSS does the rest.

by Jon Fuller

HTML

<div id="date_progress_wrapper">
	<span id="date_progress_percent"></span>
	<label id="date_label" for="date_progress">Nov 1, 2022</label>
	<progress id="date_progress" value="" max="100"></progress>
</div>

CSS

body {
	background: tan;
	padding: 5%;
	font-family: sans-serif;
}

#date_progress_wrapper {
	position: relative;
}

#date_progress_wrapper progress[value] {
	/* Get rid of the default appearance */
	appearance: none;
	display: block;
	width: 100%;
	height: 28px;
	position: relative;
	animation: date-gradient 4s infinite linear;
}

#date_progress_wrapper progress[value]::-webkit-progress-inner-element {
	background-position: inherit;
}

#date_progress_wrapper progress[value]::-webkit-progress-bar {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 14px;
	border: 2px solid white;
	overflow: hidden;
	padding: 3px;
	background-position: inherit;
}

#date_progress_wrapper progress[value]::-webkit-progress-value {
	border-radius: 14px;
	background-image: repeating-linear-gradient(to right, rgb(254, 161, 0) 0%, rgb(126, 59, 255) 50%, rgb(254, 161, 0) 100%);
	background-size: 200% auto;
	background-position: inherit;
}

@keyframes date-gradient { 
	0%   { background-position: 0 0; }
	100% { background-position: -200% 0; }
}

#date_progress_wrapper #date_label {
	position: absolute;
	bottom: 0;
	right: 10px;
	text-align: right;
	z-index: 1;
	color: white;
	height: 28px;
	line-height: 28px;
	white-space: nowrap;
	box-sizing: border-box;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 20px rgba(0, 0, 0, 0.8);

	font-size: 13px;
}

#date_progress_wrapper #date_progress_percent {
	display: block;
	text-align: right;
	padding-bottom: 5px;
}

#date_progress_wrapper #date_progress_percent[data-value]::after {
	content: attr(data-value) '%';
	font-size: 13px;
	text-align: right;
}

JavaScript

var start = new Date(2022, 3, 1), // YYYY, M, D
	end = new Date(2022, 12, 8), // YYYY, M, D
	today = new Date(), // today
	percent = Math.floor(((today - start) / (end - start)) * 100); // percent of today so far between the dates	

// Update the progress bar
$('#date_progress').attr('value', percent);
$('#date_label').attr('data-value', percent);
$('#date_progress_percent').attr('data-value', percent);
$('#date_progress_percent').css('width', percent + '%');