Progress Clock

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <style>
  
  * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body, button {
	color: var(--fg);
	font: 1em/1.5  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {

height: 100vh;
	display: grid;
	place-items: center;
}

.progClock {
	display: grid;
	justify-content: center;
	align-content: center;
	position: relative;
	text-align: center;
	width: 16em;
	height: 16em;
}
.progClock__time-date,
.progClock__time-digit,
.progClock__time-colon,
.progClock__time-ampm {
	transition: color 0.2s linear;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.progClock__time-date,
.progClock__time-digit {
	background: transparent;
}
.progClock__time-date,
.progClock__time-ampm {
	grid-column: 1 / 6;
}
.progClock__time-date {
	font-size: 0.75em;
	line-height: 1.33;
}
.progClock__time-digit,
.progClock__time-colon {
	font-size: 2em;
	font-weight: 400;
	grid-row: 2;
}
.progClock__time-colon {
	line-height: 1.275;
}
.progClock__time-ampm {
	cursor: default;
	grid-row: 3;
}
.progClock__rings {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.progClock__ring {
	opacity: 0.1;
}
.progClock__ring-fill {
	transition:
		opacity 0s 0.3s linear,
		stroke-dashoffset 0.3s ease-in-out;
}
.progClock__ring-fill--360 {
	opacity: 0;
	stroke-dashoffset: 0;
	transition-duration: 0.3s;
}
[data-group]:focus {
	outline: transparent;
}
[data-units] {
	transition: opacity 0.2s linear;
}
[data-group="d"]:focus,
[data-group="d"]:hover {
	color: rgb(253,41,20);
}
[data-group="h"]:focus,
[data-group="h"]:hover {
	color: rgb(51,53,65);
}
[data-group="m"]:focus,
[data-group="m"]:hover {
	color: rgb(92,184,92);
}
[data-group="s"]:focus,
[data-group="s"]:hover {
	color: rgb(249,187,4);
}
[data-group]:focus ~ .progClock__rings [data-units],
[data-group]:hover ~ .progClock__rings [data-units] {
	opacity: 0.2;
}
[data-group="d"]:focus ~ .progClock__rings [data-units="d"],
[data-group="d"]:hover ~ .progClock__rings [data-units="d"],
[data-group="h"]:focus ~ .progClock__rings [data-units="h"],
[data-group="h"]:hover ~ .progClock__rings [data-units="h"],
[data-group="m"]:focus ~ .progClock__rings [data-units="m"],
[data-group="m"]:hover ~ .progClock__rings [data-units="m"],
[data-group="s"]:focus ~ .progClock__rings [data-units="s"],
[data-group="s"]:hover ~ .progClock__rings [data-units="s"] {
	opacity: 1;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.progClock__ring {
		opacity: 0.2;
	}
}
  
  
  </style>

</head>
<body>

<div id="clock" class="progClock">
	<button class="progClock__time-date" data-group="d" type="button">
		<small data-unit="w">Sunday</small><br>
		<span data-unit="mo">January</span>
		<span data-unit="d">1</span>
	</button>
	<button class="progClock__time-digit" data-unit="h" data-group="h" type="button">12</button><span class="progClock__time-colon">:</span><button class="progClock__time-digit" data-unit="m" data-group="m" type="button">00</button><span class="progClock__time-colon">:</span><button class="progClock__time-digit" data-unit="s" data-group="s" type="button">00</button>
	<span class="progClock__time-ampm" data-unit="ap">AM</span>
	<svg class="progClock__rings" width="256" height="256" viewBox="0 0 256 256">
		<defs>
			<linearGradient id="clock-red" x1="1" y1="0.5" x2="0" y2="0.5">
				<stop offset="0%" stop-color="rgb(253,41,20)" />
				<stop offset="100%" stop-color="rgb(253,41,20)" />
			</linearGradient>
			<linearGradient id="clock-yellow" x1="1" y1="0.5" x2="0" y2="0.5">
				<stop offset="0%" stop-color="rgb(51,53,65)" />
				<stop offset="100%" stop-color="rgb(51,53,65)" />
			</linearGradient>
			<linearGradient id="clock-blue" x1="1" y1="0.5" x2="0" y2="0.5">
				<stop offset="0%" stop-color="rgb(92,184,92)" />
				<stop offset="100%" stop-color="rgb(92,184,92)" />
			</linearGradient>
			<linearGradient id="clock-purple" x1="1" y1="0.5" x2="0" y2="0.5">
				<stop offset="0%" stop-color="rgb(249,187,4)" />
				<stop offset="100%" stop-color="rgb(249,187,4)" />
			</linearGradient>
		</defs>
		
		<g data-units="d">
			<circle class="progClock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#clock-red)" stroke-width="12" />
			<circle class="progClock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#clock-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)" />
		</g>
		
		<g data-units="h">
			<circle class="progClock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#clock-yellow)" stroke-width="12" />
			<circle class="progClock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#clock-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)" />
		</g>
		
		<g data-units="m">
			<circle class="progClock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#clock-blue)" stroke-width="12" />
			<circle class="progClock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#clock-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)" />
		</g>
		
		<g data-units="s">
			<circle class="progClock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#clock-purple)" stroke-width="12" />
			<circle class="progClock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#clock-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)" />
		</g>
	</svg>
</div>

window.addEventListener("DOMContentLoaded",() => {
	const clock = new ProgClock("#clock");
});

class ProgClock {
	constructor(qs) {
		this.el = document.querySelector(qs);
		this.time = 0;
		this.updateTimeout = null;
		this.ringTimeouts = [];
		this.update();
	}
	getDayOfWeek(day) {
		switch (day) {
			case 1:
				return "Monday";
			case 2:
				return "Tuesday";
			case 3:
				return "Wednesday";
			case 4:
				return "Thursday";
			case 5:
				return "Friday";
			case 6:
				return "Saturday";
			default:
				return "Sunday";
		}
	}
	getMonthInfo(mo,yr) {
		switch (mo) {
			case 1:
				return { name: "February", days: yr % 4 === 0 ? 29 : 28 };
			case 2:
				return { name: "March", days: 31 };
			case 3:
				return { name: "April", days: 30 };
			case 4:
				return { name: "May", days: 31 };
			case 5:
				return { name: "June", days: 30 };
			case 6:
				return { name: "July", days: 31 };
			case 7:
				return { name: "August", days: 31 };
			case 8:
				return { name: "September", days: 30 };
			case 9:
				return { name: "October", days: 31 };
			case 10:
				return { name: "November", days: 30 };
			case 11:
				return { name: "December", days: 31 };
			default:
				return { name: "January", days: 31 };
		}
	}
	update() {
		this.time = new Date();

if (this.el) {
			// date and time
			const dayOfWeek = this.time.getDay();
			const year = this.time.getFullYear();
			const month = this.time.getMonth();
			const day = this.time.getDate();
			const hr = this.time.getHours();
			const min = this.time.getMinutes();
			const sec = this.time.getSeconds();
			const dayOfWeekName = this.getDayOfWeek(dayOfWeek);
			const monthInfo = this.getMonthInfo(month,year);
			const m_progress = sec / 60;
			const h_progress = (min + m_progress) / 60;
			const d_progress = (hr + h_progress) / 24;
			const mo_progress = ((day - 1) + d_progress) / monthInfo.days;
			const units = [
				{
					label: "w",
					value: dayOfWeekName
				},
				{
					label: "mo",
					value: monthInfo.name,
					progress: mo_progress
				},
				{
					label: "d", 
					value: day,
					progress: d_progress
				},
				{
					label: "h", 
					value: hr > 12 ? hr - 12 : hr,
					progress: h_progress
				},
				{
					label: "m", 
					value: min < 10 ? "0" + min : min,
					progress: m_progress
				},
				{
					label: "s", 
					value: sec < 10 ? "0" + sec : sec
				},
				{
					label: "ap",
					value: hr > 12 ? "PM" : "AM"
				}
			];

// flush out the timeouts
			this.ringTimeouts.forEach(t => {
				clearTimeout(t);
			});
			this.ringTimeouts = [];

// update the display
			units.forEach(u => {
				// rings
				const ring = this.el.querySelector(`[data-ring="${u.label}"]`);

if (ring) {
					const strokeDashArray = ring.getAttribute("stroke-dasharray");
					const fill360 = "progClock__ring-fill--360";

if (strokeDashArray) {
						// calculate the stroke
						const circumference = +strokeDashArray.split(" ")[0];
						const strokeDashOffsetclockt = 1 - u.progress;

ring.setAttribute(
							"stroke-dashoffset",
							strokeDashOffsetclockt * circumference
						);

// add the fade-out transition, then remove it
						if (strokeDashOffsetclockt === 1) {
							ring.classList.add(fill360);

this.ringTimeouts.push(
								setTimeout(() => {
									ring.classList.remove(fill360);
								}, 600)
							);
						}
					}
				}

// digits
				const unit = this.el.querySelector(`[data-unit="${u.label}"]`);

if (unit)
					unit.innerText = u.value;
			});
		}

clearTimeout(this.updateTimeout);
		this.updateTimeout = setTimeout(this.update.bind(this),1e3);
	}
}

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Progress Clock