created button loading animation

web-frontend/public/login.html

@@ -9,7 +9,7 @@
         <div class="box-page">
 
             <!-- login page -->
-            <div class="box login-page login-page-login">
+            <div class="box login-page login-page-login hidden">
                 <h1 class="box-title">Baserow</h1>
                 <div class="alert alert-error alert-has-icon">
                     <div class="alert-icon">
@@ -94,7 +94,7 @@
             </div>
 
             <!-- sign up page -->
-            <div class="box login-page login-page-signup hidden">
+            <div class="box login-page login-page-signup">
                 <h1 class="box-title">Sign up</h1>
                 <form>
                     <div class="control">
@@ -176,6 +176,11 @@
                     $(".login-page").addClass("hidden");
                     $($(this).attr("data-page")).removeClass("hidden");
                 });
+
+                $("[data-loading]").click(function(e) {
+                    e.preventDefault();
+                    $(this).toggleClass("button-loading");
+                });
             })();
         </script>
     </body>

web-frontend/src/scss/abstracts/_mixins.scss

@@ -10,6 +10,11 @@
   &[disabled] {
     background-color: $background;
   }
+
+  &.button-loading {
+    background-color: $active-background;
+    color: $active-background;
+  }
 }
 
 @mixin button-size($font-size, $height, $left-right-space) {

web-frontend/src/scss/abstracts/_variables.scss

@@ -1,7 +1,6 @@
 $text-font-stack: 'Open Sans', sans-serif;
 $logo-font-stack: 'Montserrat', sans-serif;
 
-
 // primary colors
 $color-primary-100: #ebf7ff !default;
 $color-primary-200: #b5dbf5 !default;

web-frontend/src/scss/base/_helpers.scss

@@ -5,3 +5,13 @@
 .align-right {
   text-align: right;
 }
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

web-frontend/src/scss/components/_button.scss

@@ -9,8 +9,9 @@
   vertical-align: middle;
   text-decoration: none;
   border-radius: 3px;
+  transition: padding 0.05s ease-in-out;
 
-  @include button-size(14px, 32px, 12px);
+  @include button-size(14px, 32px, 14px);
   @include button-style($color-primary-500, $color-primary-600);
 
   &:hover,
@@ -56,3 +57,29 @@
     margin: 0 3px;
   }
 }
+
+.button-loading {
+  position: relative;
+  cursor: wait;
+  user-select: none;
+
+  &:hover,
+  &:focus {
+    box-shadow: none;
+  }
+
+  &::after {
+    content: " ";
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin: -0.7em;
+    display: block;
+    width: 1.4em;
+    height: 1.4em;
+    border-radius: 50%;
+    border: 0.25em solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: spin 1.2s linear infinite;
+  }
+}