cute progress bar animations

server/scripts/modules/progress.js

@@ -75,13 +75,13 @@ class Progress extends WeatherDisplay {
 		// calculate loaded percent
 		const loadedPercent = (loadedCount / displays.length);
 
+		this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
 		if (loadedPercent < 1.0) {
 			// show the progress bar and set width
 			this.progressCover.parentNode.classList.add('show');
-			this.progressCover.style.width = `${(1.0 - loadedPercent) * 100}%`;
 		} else {
-			// hide the progressbar
-			this.progressCover.parentNode.classList.remove('show');
+			// hide the progressbar after 1 second (lines up with with width transition animation)
+			setTimeout(() => this.progressCover.parentNode.classList.remove('show'), 1000);
 		}
 	}
 

server/styles/scss/_progress.scss

@@ -134,7 +134,7 @@
 			animation-fill-mode: forwards;
 			animation-iteration-count: infinite;
 			animation-name: progress-scroll;
-			animation-timing-function: linear;
+			animation-timing-function: steps(8, end);
 		}
 
 		.cover {
@@ -144,6 +144,7 @@
 			background-color: white;
 			width: 100%;
 			height: 24px;
+			transition: width 1s steps(6);
 		}
 	}
 }