nicer loading spinner

fixes #29
NixOS · Jun 11, 2020 · 07403eb · 07403eb
1 parent f3139f5
commit 07403eb
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/src/Search.elm b/src/Search.elm
@@ -360,7 +360,7 @@ view path title model viewSuccess outMsg =
                 div [] [ text "" ]
 
             RemoteData.Loading ->
-                div [] [ text "Loading" ]
+                div [ class "loader" ] [ text "Loading..." ]
 
             RemoteData.Success result ->
                 if result.hits.total.value == 0 then

diff --git a/src/index.scss b/src/index.scss
@@ -76,3 +76,64 @@ header .navbar.navbar-static-top {
     }
   }
 }
+
+.loader,
+.loader:before,
+.loader:after {
+  background: #ffffff;
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  width: 1em;
+  height: 4em;
+}
+.loader {
+  color: #000000;
+  text-indent: -9999em;
+  margin: 88px auto;
+  position: relative;
+  font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  position: absolute;
+  top: 0;
+  content: '';
+}
+.loader:before {
+  left: -1.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 1.5em;
+}
+@-webkit-keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+@keyframes load1 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}
+