animated dashed line as loading indicator, instead of a spinner, resolves #3

2014-08-15 11:31:05 +02:00 · 2014-08-15 11:31:05 +02:00 · f0d0182256
commit f0d0182256
parent 61238193cf
2 changed files with 43 additions and 1 deletions
--- a/css/style.css
+++ b/css/style.css
@ -161,3 +161,27 @@ textarea {
 textarea:focus {
    background-color: rgba(255,255,255,255);
 }
+
+/* dashed line animation, derived from Chris Coyier and others
+   http://css-tricks.com/svg-line-animation-works/
+ */
+.loading-trailer {
+    -webkit-animation: dash 0.4s linear infinite;
+    animation: dash 0.4s linear infinite;
+}
+@-webkit-keyframes dash {
+  from {
+    stroke-dashoffset: 20;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes dash {
+  from {
+    stroke-dashoffset: 20;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}