191 lines (179 loc) · 4.13 KB

layout	page
title	Progress
permalink	/progress
noheader	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;*/ } .progress.swipe:before { 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(id, percent) { bar = document.querySelector('#'+id) previous = bar.style.width newwidth = (100*percent) + '%' bar.style.width = newwidth } function progress(time, eventStart, eventEnd) { datetime = time ?? new Date() return (datetime - eventStart)/(eventEnd - eventStart) } function markProgress(time) { let now = new Date() let events = { 'minute': { 'current': new Date().setSeconds(0), 'next': new Date().setSeconds(60), }, 'hour': { 'current': new Date().setMinutes(0, 0), 'next': new Date().setMinutes(60, 0), }, 'day': { 'current': new Date().setHours(0, 0, 0), 'next': new Date().setHours(24, 0, 0), }, 'week': { 'current': new Date().setHours(new Date().getDay()*(-24), 0, 0), 'next': new Date().setHours((7-new Date().getDay())*24, 0, 0), }, 'month': { 'current': new Date(now.getFullYear(), now.getMonth(), 1), 'next': new Date(now.getFullYear(), now.getMonth() + 1, 1), }, 'year': { 'current': new Date(now.getFullYear(), 0).setHours(0, 0, 0), 'next': new Date(now.getFullYear(), 12).setHours(0, 0, 0), }, /*'decade': { 'current': , 'next': , }, 'century': { 'current': , 'next': , }, 'millennium': { 'current': , 'next': , },*/ } datetime = time ?? new Date() for (event in events) { current = events[event].current next = events[event].next progressbar(event, (datetime - current)/(next - current)) } } setInterval('markProgress()', 1000) setInterval('clockdisplay()', 1000) </script>