style(angularjs): close #52 - Beautify waiting appearance for buttons with uiWaitOn

Author: bndynet

src/main/resources/static/apps/admin/assets/css/style.css

@@ -626,6 +626,21 @@ md-backdrop.md-dialog-backdrop {
 }
 
 /* angularjs component styles */
+@-webkit-keyframes sk-bouncedelay {
+    0%, 80%, 100% { -webkit-transform: scale(0) }
+    40% { -webkit-transform: scale(1.0) }
+}
+    
+@keyframes sk-bouncedelay {
+    0%, 80%, 100% { 
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    } 40% { 
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+    }
+}
+
 .btn[ui-wait-on] {
     position: relative;
 
@@ -635,23 +650,53 @@ md-backdrop.md-dialog-backdrop {
         top: 0;
         left: 0;
         line-height: 32px;
+
+        & > div {
+            width: 1rem;
+            height: 1rem;
+            background-color: #ffffff;
+            margin: 0 0.2rem;
+          
+            border-radius: 100%;
+            display: inline-block;
+            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        }
+
+        .bounce1 {
+            -webkit-animation-delay: -0.32s;
+            animation-delay: -0.32s;
+        }
+          
+        .bounce2 {
+            -webkit-animation-delay: -0.16s;
+            animation-delay: -0.16s;
+        }
     }
 
     &.btn-xs {
         .in-process {
-            line-height: 20px;
+            line-height: 18px;
+            & > div {
+                width: 0.5rem;
+                height: 0.5rem;
+            }
         }
     }
 
     &.btn-sm {
         .in-process {
-            line-height: 28px;
+            line-height: 30px;
+            & > div {
+                width: 0.75rem;
+                height: 0.75rem;
+            }
         }
     }
 
     &.btn-lg {
         .in-process {
-            line-height: 42px;
+            line-height: 46px;
         }
     }
 }

src/main/resources/static/apps/admin/assets/css/style.css.map

@@ -9,7 +9,7 @@ angular.module('app')
                 scope.$watch(attr.uiWaitOn, function (value) {
                     elem.attr('disabled', value);
                     if (value) {
-                        elem.prepend('<span class="in-process"><i class="fa fa-spin fa-spinner"></i></span>');
+                        elem.prepend('<span class="in-process"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></span>');
                         angular.forEach(children, function(child) {
                             angular.element(child).css('visibility', 'hidden');
                         });

src/main/resources/static/apps/admin/assets/css/style.scss

@@ -213,7 +213,7 @@ img {
     .logo {
       width: 50%;
       margin-bottom: 2rem;
-      font-size: 3rem;
+      font-size: 5rem;
     }
 
     .title {