Merge branch 'master' into compliment-doesnt-move

sbimochan · Oct 5, 2020 · 83020d5 · 83020d5
2 parents f4fad47 + aead8a0
commit 83020d5
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -6,13 +6,26 @@
   <title>Zoom Mirror</title>
   <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="main.css" type="text/css" media="all">
+  <link rel="stylesheet" href="spinner.css" type="text/css" media="all">
 </head>
 <body>
   <div class="video-window-wrapper">
-    <div class="gradient-border" id="camera">
+    <div class="spinner">
+    <div class="sk-cube-grid">
+      <div class="sk-cube sk-cube1"></div>
+      <div class="sk-cube sk-cube2"></div>
+      <div class="sk-cube sk-cube3"></div>
+      <div class="sk-cube sk-cube4"></div>
+      <div class="sk-cube sk-cube5"></div>
+      <div class="sk-cube sk-cube6"></div>
+      <div class="sk-cube sk-cube7"></div>
+      <div class="sk-cube sk-cube8"></div>
+      <div class="sk-cube sk-cube9"></div>
+    </div>
+    </div>
+    <div class="gradient-border gradient-border--hidden" id="camera">
       <video id="video">Video stream not available.</video>
     </div>
-    <div class="loader"></div>
     <div id="subtitle">
     </div>
   </div>

diff --git a/main.css b/main.css
@@ -43,6 +43,12 @@ body {
   background: #1D1F20;
   position: relative;
   border-radius: var(--borderWidth);
+  transition: opacity .5s;
+}
+
+.gradient-border--hidden{
+  display: none;
+  opacity: 0;
 }
 
 .gradient-border:after {
@@ -71,18 +77,3 @@ body {
         background-position: 0% 50%;
     }
 }
-
-.loader {
-  border: 16px solid #f3f3f3; /* Light grey */
-  border-top: 16px solid limegreen; /* Blue */
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  animation: spin 1s linear infinite;
-  margin: 20px auto;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
diff --git a/script.js b/script.js
@@ -35,6 +35,12 @@ subtitle.innerText =
 	window.addEventListener("load", startup, false);
 })();
 
+function swapSpinnerWithVideo(){
+	document.querySelector('.spinner').classList.add('spinner--hidden');
+	document.querySelector('.gradient-border').classList.remove('gradient-border--hidden');
+}
+
+
 function startup() {
 	video = document.getElementById("video");
 	canvas = document.getElementById("canvas");
@@ -53,6 +59,8 @@ function startup() {
 		"canplay",
 		function (ev) {
 			if (!streaming) {
+				swapSpinnerWithVideo();
+
 				const width = 1024;
 				const height = 768;
 				let resultHeight =
@@ -65,9 +73,6 @@ function startup() {
 					resultHeight = width / (4 / 3);
 				} else {
 					subtitle.innerText = "";
-					const spinner = document.querySelector(".loader");
-					spinner.style.display = "none";
-
 					setTimeout(() => {
 						const random = Math.floor(
 							Math.random() * compliments.length

diff --git a/spinner.css b/spinner.css
@@ -0,0 +1,84 @@
+.spinner{
+  font-family: 'Raleway';
+  color: white;
+  text-align: center;
+  transition: opacity .5s;
+}
+
+.spinner--hidden{
+  display: none;
+  opacity: 0;
+}
+
+.sk-cube-grid {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+}
+
+.sk-cube-grid .sk-cube {
+  width: 33%;
+  height: 33%;
+  background-color: #333;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
+}
+.sk-cube-grid .sk-cube1 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+          background:#f79533; }
+.sk-cube-grid .sk-cube2 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+        background:#f37055; }
+.sk-cube-grid .sk-cube3 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+        background:#ef4e7b;
+}.sk-cube-grid .sk-cube4 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+          background:#bebc1f; }
+.sk-cube-grid .sk-cube5 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+        background:#45b16e; }
+.sk-cube-grid .sk-cube6 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+        background:#a166ab; }
+.sk-cube-grid .sk-cube7 {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+        background:#06dabd;
+       }
+.sk-cube-grid .sk-cube8 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+        background:#0b8be0; }
+.sk-cube-grid .sk-cube9 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+          background:#5b45d6; }
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1); 
+  }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  } 
+}
+