Add spinner before loading an email or draft

related with #657
with @tuliocasagrande

3 files changed, 46 insertions, 1 deletions

diff --git a/web-ui/app/scss/base/_colors.scss b/web-ui/app/scss/base/_colors.scss
index 17333ff9..f3c245a9 100644
--- a/web-ui/app/scss/base/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
@@ -5,6 +5,7 @@ $lighter_blue: #91C2D1;
 $light_blue: #3DABC4;
 $dark_blue: #178CA6;
 $bullet-blue: #5cacde;
+$middle_blue: #83EAEA;
 $light_orange: #FF9C00;
 $dark_orange: #FF7902;
 
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index e99ab194..215d28f1 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -33,7 +33,7 @@
 @import "views/mail-list";
 @import "views/_action-bar.scss";
 @import "views/_navigation.scss";
+@import "views/_spinner.scss";
 
 // misc stuff
 @import "others";
-
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);
+ }
+}