layout	title	permalink	noheader
page	Progress	/progress	true

Progress

{{ site.time }}

<style> #progress-list { list-style: none; font-family: 'Space Grotesk'; } #progress-list li { display: -ms-flex; display: flex; flex-direction: column; row-gap: 6px; } .progress-bar { height: 2.5em; width: 100%; background-color: #171717; border-radius: 2px; overflow: clip; } .progress { height: inherit; background-color: #04977C; transition: 100ms ease; } .progress:before { display: inline-block; height: inherit; background-image: linear-gradient(to right, transparent, #ccc9 90%, #ccc6); content: ''; animation: swipe 0.5s ease; } @keyframes swipe { from { width: 0%; } to { width: 100%; } } </style>

next minute
next hour
next day
next week
next month
next season
next year
next decade
next century
next millennium

<script> function clockdisplay(time) { datetime = time ?? new Date() clock.innerText = datetime } function progressbar(bar, percent) { bar.style.width = (100*percent) + '%' } function markProgress(time) { datetime = time ?? new Date() currentMonth = new Date(datetime.getFullYear(), datetime.getMonth(), 1) nextMonth = new Date(datetime.getFullYear(), datetime.getMonth() + 1, 1) currentMonth.setDate(1) nextMonth.setDate(1) currentYear = new Date(datetime.getFullYear(), 0) nextYear = new Date(datetime.getFullYear(), 12) progressbar(minute, datetime.getSeconds()/60) progressbar(hour, datetime.getMinutes()/60) progressbar(day, datetime.getHours()/24) progressbar(week, datetime.getDay()/7) progressbar(month, (datetime - currentMonth)/(nextMonth - currentMonth)) progressbar(year, (datetime - currentYear)/(nextYear - currentYear)) } setInterval('markProgress()', 1000) setInterval('clockdisplay()', 1000) </script>