incorporate loader.css into viewer-styles.css

3DStreet · Nov 27, 2023 · 911d732 · 911d732
1 parent c6a9c2d
commit 911d732
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 175 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
     <link rel="stylesheet" href="src/viewer-styles.css">
-    <link rel="stylesheet" href="./ui_assets/loader/loader.css" />
   </head>
 
   <body>

diff --git a/src/viewer-styles.css b/src/viewer-styles.css
@@ -161,4 +161,180 @@ body.aframe-inspector-opened .right-fixed {
 }
 body.aframe-inspector-opened #sceneTitle {
 	display: none;
-}
+}
+
+/********* Loading Animation Styles *********/
+.loader__wrapper {
+	width: 100vw;
+	height: 100vh;
+	background: rgba(14, 14, 14, 0.69);
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+  }
+
+  .loader {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	position: relative;
+	z-index: 999999;
+
+  }
+
+  .road {
+	width: 320px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-top: 12px;
+
+	border-top: 4px solid #fff;
+
+	color: #fff;
+	font-weight: normal;
+  }
+
+  /* ENTITIES */
+
+  /*
+	entities width = 1050px
+	loader width = 320px
+	animation-duration = 5840ms 
+  */
+  .entities {
+	position: absolute;
+	bottom: 40px;
+	right: 0;
+
+	/* 730px = 1050px - 320px */
+	clip-path: inset(0 0px 0 730px);
+	transform: translateX(0px);
+	animation: topMoving 5840ms linear infinite;
+  }
+
+  @keyframes topMoving {
+	0% {
+	  clip-path: inset(0 0px 0 730px);
+	  transform: translateX(0px);
+	}
+	100% {
+	  clip-path: inset(0 730px 0 0px);
+	  transform: translateX(730px);
+	}
+  }
+
+  /* TRANSPORT */
+  .transport {
+	position: absolute;
+	left: 0;
+	top: 2px;
+  }
+
+  .wrapper__transport {
+	display: flex;
+	align-items: flex-end;
+	position: relative;
+  }
+
+  .wrapper__transport img {
+	position: absolute;
+  }
+
+  /* BIKE */
+  .transport .bike {
+	position: absolute;
+	animation: bike 5840ms linear infinite;
+  }
+
+  @keyframes bike {
+	0% {
+	  left: -27px;
+	  clip-path: inset(0 0 0 100%);
+	}
+	4% {
+	  left: 0px;
+	  clip-path: inset(0 0 0 0);
+	}
+	32% {
+	  left: 294px;
+	  clip-path: inset(0 0 0 0);
+	}
+	36% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+	100% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+  }
+
+  /* BUS */
+  .transport .bus {
+	position: absolute;
+	animation: bus 5840ms linear infinite;
+  }
+
+  @keyframes bus {
+	0% {
+	  left: -36px;
+	  clip-path: inset(0 0 0 100%);
+	}
+	8% {
+	  left: -36px;
+	  clip-path: inset(0 0 0 100%);
+	}
+	12% {
+	  left: 0px;
+	  clip-path: inset(0 0 0 0);
+	}
+	44% {
+	  left: 284px;
+	  clip-path: inset(0 0 0 0);
+	}
+	48% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+	100% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+  }
+
+  /* CAR */
+  .transport .car {
+	position: absolute;
+	animation: car 5840ms linear infinite;
+  }
+
+  @keyframes car {
+	0% {
+	  left: -30px;
+	  clip-path: inset(0 0 0 100%);
+	}
+	20% {
+	  left: -30px;
+	  clip-path: inset(0 0 0 100%);
+	}
+	24% {
+	  left: 0px;
+	  clip-path: inset(0 0 0 0);
+	}
+	76% {
+	  left: 290px;
+	  clip-path: inset(0 0 0 0);
+	}
+	80% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+	100% {
+	  clip-path: inset(0 100% 0 0);
+	  left: 320px;
+	}
+  }
+
diff --git a/ui_assets/loader/loader.css b/ui_assets/loader/loader.css