Add connection spinner

palavatv · May 5, 2020 · bb45ce9 · bb45ce9
1 parent a3c98c5
commit bb45ce9
Showing 1 changed file with 81 additions and 3 deletions.
diff --git a/src/components/PeerStatus.vue b/src/components/PeerStatus.vue
@@ -3,9 +3,11 @@
     <div v-if="status === 'audio'">
       <span class="symbol" role="img" aria-label="old telephone">☎︎</span>
     </div>
-    <!-- <div v-else-if="status === 'not-ready'">
-      <span class="symbol" role="img" aria-label=""></span>
-    </div> -->
+    <div v-else-if="status === 'not-ready'">
+      <span class="symbol" role="img" aria-label="pulsating rectangels">
+        <div class="lds-grid"><div/><div/><div/><div/><div/><div/><div/><div/><div/></div>
+      </span>
+    </div>
     <div v-else-if="status === 'no-media'">
       <span class="symbol" role="img" aria-label="speech bubble">🗨︎</span>
     </div>
@@ -87,4 +89,80 @@ export default {
     }
   }
 }
+
+// based on https://loading.io/css/
+.lds-grid {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  .peer--in-lobby & {
+    transform: scale(80%);
+  }
+  .peer--on-stage & {
+    transform: scale(120%);
+  }
+}
+.lds-grid div {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  animation: lds-grid 1.2s linear infinite;
+  box-shadow: 1px 1px 5px $black;
+}
+.lds-grid div:nth-child(1) {
+  top: 8px;
+  left: 8px;
+  animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+  top: 8px;
+  left: 32px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+  top: 8px;
+  left: 56px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+  top: 32px;
+  left: 8px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+  top: 32px;
+  left: 32px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+  top: 32px;
+  left: 56px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+  top: 56px;
+  left: 8px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+  top: 56px;
+  left: 32px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+  top: 56px;
+  left: 56px;
+  animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
 </style>