progress screen progress bar

server/styles/scss/_progress.scss

@@ -11,7 +11,7 @@
 		top: 15px;
 		margin: 0px 10px;
 		box-sizing: border-box;
-		height: 280px;
+		height: 310px;
 		overflow: hidden;
 
 		.item {
@@ -82,4 +82,68 @@
 		}
 	}
 
+
+}
+
+#progress-html.weather-display .scroll {
+
+	@keyframes progress-scroll {
+		0% {
+			background-position: -40px 0;
+		}
+
+		100% {
+			background-position: 40px 0;
+		}
+	}
+
+	.progress-bar-container {
+		border: 2px solid black;
+		background-color: white;
+		margin: 20px auto;
+		width: 524px;
+		position: relative;
+		display: none;
+
+		&.show {
+			display: block;
+		}
+
+		.progress-bar {
+			height: 20px;
+			margin: 2px;
+			width: 520px;
+			background: repeating-linear-gradient(90deg,
+					c.$gradient-loading-1 0px,
+					c.$gradient-loading-1 5px,
+					c.$gradient-loading-2 5px,
+					c.$gradient-loading-2 10px,
+					c.$gradient-loading-3 10px,
+					c.$gradient-loading-3 15px,
+					c.$gradient-loading-4 15px,
+					c.$gradient-loading-4 20px,
+					c.$gradient-loading-3 20px,
+					c.$gradient-loading-3 25px,
+					c.$gradient-loading-2 25px,
+					c.$gradient-loading-2 30px,
+					c.$gradient-loading-1 30px,
+					c.$gradient-loading-1 40px,
+				);
+			// animation
+			animation-duration: 2s;
+			animation-fill-mode: forwards;
+			animation-iteration-count: infinite;
+			animation-name: progress-scroll;
+			animation-timing-function: linear;
+		}
+
+		.cover {
+			position: absolute;
+			top: 0px;
+			right: 0px;
+			background-color: white;
+			width: 100%;
+			height: 24px;
+		}
+	}
 }

server/styles/scss/_radar.scss

@@ -0,0 +1,21 @@
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
+
+#radar-html.weather-display {
+	background-image: url('../images/BackGround4_1.png');
+
+	.header {
+		.title.dual {
+			color: white;
+			font-family: 'Arial', sans-serif;
+			font-weight: bold;
+			font-size: 28pt;
+
+			.bottom {
+				top: 30px;
+			}
+		}
+	}
+}
+
+.weather-display .main.radar {}

server/styles/scss/_weather-display.scss

@@ -110,7 +110,7 @@
 	.scroll {
 		@include u.text-shadow(3px, 1.5px);
 		width: 640px;
-		height: 80px;
+		height: 70px;
 		overflow: hidden;
 		margin-top: 10px;
 

server/styles/scss/main.scss

@@ -1,9 +1,10 @@
 @import 'page';
+@import 'weather-display';
 @import 'current-weather';
 @import 'extended-forecast';
 @import 'hourly';
 @import 'latest-observations';
 @import 'local-forecast';
 @import 'progress';
-@import 'regional-forecast';
-@import 'weather-display';
+@import 'radar';
+@import 'regional-forecast';

server/styles/scss/shared/_colors.scss

@@ -7,6 +7,11 @@ $column-header: rgb(32, 0, 87);
 $gradient-main-background-1: #102080;
 $gradient-main-background-2: #001040;
 
+$gradient-loading-1: #09246f;
+$gradient-loading-2: #364ac0;
+$gradient-loading-3: #4f99f9;
+$gradient-loading-4: #8ffdfa;
+
 $extended-low: #8080FF;
 
 $blue-box: #26235a;