Merge pull request #954 from pixelated/spinner

Add spinner before loading an email or draft.

1 files changed, 44 insertions, 0 deletions

diff --git a/web-ui/app/scss/views/_spinner.scss b/web-ui/app/scss/views/_spinner.scss
new file mode 100644
index 00000000..1f8fb099
--- /dev/null
+++ b/web-ui/app/scss/views/_spinner.scss
@@ -0,0 +1,44 @@
+$offset: 187;
+$duration: 1.4s;
+
+#spinner-section {
+  margin: auto;
+  width: 35px;
+  margin-top: 40%;
+}
+
+#spinner {
+  animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+#spinner-path {
+  stroke-dasharray: $offset;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    dash $duration ease-in-out infinite,
+    colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+	0% { stroke: $dark_blue; }
+	50% { stroke: $middle_blue; }
+  100% { stroke: $dark_blue; }
+}
+
+@keyframes dash {
+ 0% { stroke-dashoffset: $offset; }
+ 50% {
+   stroke-dashoffset: $offset/4;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: $offset;
+   transform:rotate(450deg);
+ }
+}