From 8592cc5634490c030c829e72d860fabd2540933c Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Mon, 30 Jan 2017 19:06:24 -0200
Subject: Add spinner before loading an email or draft

related with #657
with @tuliocasagrande
---
 web-ui/app/scss/views/_spinner.scss | 44 +++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 web-ui/app/scss/views/_spinner.scss

(limited to 'web-ui/app/scss/views/_spinner.scss')

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);
+ }
+}
-- 
cgit v1.2.3