scanningSpinner stuff should be before script code

AR-js-org · Apr 4, 2023 · e3a06c3 · e3a06c3
1 parent 7aff8c8
commit e3a06c3
Showing 1 changed file with 71 additions and 70 deletions.
diff --git a/three.js/examples/measure-it.html b/three.js/examples/measure-it.html
@@ -13,6 +13,76 @@
 		<br />
 		Contact me any time at <a href='https://twitter.com/nicolocarp' target='_blank'>@nicolocarp</a>
 	</div>
+	<!-- Scanning animation when the marker are not visible -->
+	<div class="scanningSpinner">
+		<label>
+			Scanning
+		</label>
+		<div class="rect1"></div>
+		<div class="rect2"></div>
+		<div class="rect3"></div>
+	</div>
+	<style>
+		.scanningSpinner {
+			margin: 100px auto;
+			height: 40px;
+			text-align: center;
+		}
+
+		.scanningSpinner label {
+			display: block;
+			color: #333;
+			font-size: 200%;
+		}
+
+		.scanningSpinner>div {
+			background-color: #333;
+			height: 100%;
+			width: 6px;
+			display: inline-block;
+
+			-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+			animation: sk-stretchdelay 1.2s infinite ease-in-out;
+		}
+
+		.scanningSpinner .rect2 {
+			-webkit-animation-delay: -1.1s;
+			animation-delay: -1.1s;
+		}
+
+		.scanningSpinner .rect3 {
+			-webkit-animation-delay: -1.0s;
+			animation-delay: -1.0s;
+		}
+
+		@-webkit-keyframes sk-stretchdelay {
+
+			0%,
+			40%,
+			100% {
+				-webkit-transform: scaleY(0.4)
+			}
+
+			20% {
+				-webkit-transform: scaleY(1.0)
+			}
+		}
+
+		@keyframes sk-stretchdelay {
+
+			0%,
+			40%,
+			100% {
+				transform: scaleY(0.4);
+				-webkit-transform: scaleY(0.4);
+			}
+
+			20% {
+				transform: scaleY(1.0);
+				-webkit-transform: scaleY(1.0);
+			}
+		}
+	</style>
 	<script>
 		//////////////////////////////////////////////////////////////////////////////////
 		//		Init
@@ -298,75 +368,6 @@
 		})
 	</script>
 
-	<!-- Scanning animation when the marker are not visible -->
-	<div class="scanningSpinner">
-		<label>
-			Scanning
-		</label>
-		<div class="rect1"></div>
-		<div class="rect2"></div>
-		<div class="rect3"></div>
-	</div>
-	<style>
-		.scanningSpinner {
-			margin: 100px auto;
-			height: 40px;
-			text-align: center;
-		}
-
-		.scanningSpinner label {
-			display: block;
-			color: #333;
-			font-size: 200%;
-		}
-
-		.scanningSpinner>div {
-			background-color: #333;
-			height: 100%;
-			width: 6px;
-			display: inline-block;
-
-			-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-			animation: sk-stretchdelay 1.2s infinite ease-in-out;
-		}
-
-		.scanningSpinner .rect2 {
-			-webkit-animation-delay: -1.1s;
-			animation-delay: -1.1s;
-		}
-
-		.scanningSpinner .rect3 {
-			-webkit-animation-delay: -1.0s;
-			animation-delay: -1.0s;
-		}
-
-		@-webkit-keyframes sk-stretchdelay {
-
-			0%,
-			40%,
-			100% {
-				-webkit-transform: scaleY(0.4)
-			}
-
-			20% {
-				-webkit-transform: scaleY(1.0)
-			}
-		}
-
-		@keyframes sk-stretchdelay {
-
-			0%,
-			40%,
-			100% {
-				transform: scaleY(0.4);
-				-webkit-transform: scaleY(0.4);
-			}
-
-			20% {
-				transform: scaleY(1.0);
-				-webkit-transform: scaleY(1.0);
-			}
-		}
-	</style>
+
 
 </body>