socialnetworknews-web

commit d6cffc55b06ef36cc59a110f37e1f685202e8569
parent eaf8c65a2a1c685052bec853811bfe394b2c0386
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sat, 31 Mar 2018 21:59:38 +0200

Add a cool loading animation to the callback page while waiting for redirect

Diffstat:
M
src/app/callback/twitter/twitter.component.html
 | 
1
+
M
src/app/callback/twitter/twitter.component.scss
 | 
55
+++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 56 insertions(+), 0 deletions(-)
diff --git a/src/app/callback/twitter/twitter.component.html b/src/app/callback/twitter/twitter.component.html
@@ -0,0 +1 @@
+<h1 class="loading">loading...</h1>
diff --git a/src/app/callback/twitter/twitter.component.scss b/src/app/callback/twitter/twitter.component.scss
@@ -0,0 +1,55 @@
+.loading{
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+  margin: auto;
+  //border: solid;
+  width: 500px;
+  height: 50px;
+  text-transform: uppercase;
+  font-size: 18px;
+  span{
+    display: inline-block;
+    background: tomato;
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: white;
+    text-shadow: 1px 1px 0 black;
+    position: relative;
+    top: 0;
+    box-shadow: inset 0 1px 1px -1px black, inset 0 -5px 1px -1px rgba(black, .5);
+  }
+}
+
+@for $i from 1 through 10{
+  .char#{$i}{
+    animation: foo 2s ease infinite, bar 3s linear infinite;
+    animation-delay: .1s * $i;
+  }
+}
+
+@keyframes foo{
+  10%{
+    top: -10px;
+  }
+  50%{
+    top:0;
+  }
+  100%{
+    top: 0;
+  }
+}
+
+@keyframes bar{
+  10%{
+    opacity: 0;
+  }
+  50%{
+    opacity: 1;
+  }
+  100%{
+    opacity: 1;
+  }
+}