Loader animation, minor tweaks

nathanbirrell · Mar 29, 2017 · c3e09b2 · c3e09b2
1 parent a185d34
commit c3e09b2
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/loader.gif b/loader.gif
diff --git a/loader.svg b/loader.svg
diff --git a/renderer.js b/renderer.js
@@ -25,7 +25,7 @@ onload = () => {
   }
 
   const loadstop = () => {
-    // loader.classList.remove(isLoadingClass)
+    loader.classList.remove(isLoadingClass)
   }
 
   webview.addEventListener('dom-ready', () => {

diff --git a/style.css b/style.css
@@ -6,17 +6,29 @@ body {
   align-items: center;
 }
 .loader {
-  background-image: url("loader.gif");
-  background-size: 18px 18px;
+  background-image: url("loader.svg");
+  background-size: contain;
   display: none;
-  height: 18px;
-  width: 18px;
+  height: 48px;
+  width: 48px;
   position: absolute;
   left: 50%;
+  margin: 0 auto;
 }
 .loader.is-loading {
   display: block;
-  margin: 0 auto;
+  animation: loader infinite 0.5s;
+}
+@keyframes loader {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(.90);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 webview {
   width: 100%;