spinner when submitting forms

1 files changed, 77 insertions, 0 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 1e23693..e689134 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -982,6 +982,7 @@ header .search_form {
 }
 
 /* 404 */
+
 #error_404 {
   display: none;
   margin: 10px 0;
@@ -990,6 +991,82 @@ header .search_form {
   font-size: 16px;
 }
 
+/* loader */
+
+.sending input[type=submit],
+.sending button {
+  display: none !important;
+}
+.sending input[type=submit] + .loader,
+.sending button + .loader {
+  display: block;
+}
+.loader {
+  display: none;
+  position: relative;
+  width: 19px;
+  height: 19px;
+  margin-left: 13px;
+  color: #987;
+}
+.loader:after {
+  position: absolute;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  content: " ";
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 0.15em;
+  -webkit-background-clip: padding-box;
+  border-color: currentColor currentColor currentColor transparent;
+  box-sizing: border-box;
+  -webkit-animation: ld-cycle 0.8s infinite linear;
+  animation: ld-cycle 0.8s infinite linear;
+}
+@-webkit-keyframes ld-cycle {
+  0%, 50%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  }
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes ld-cycle {
+  0%, 50%, 100% {
+    animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5);
+  }
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  50% {
+    -webkit-transform: rotate(180deg);
+    transform: rotate(180deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+
+/* mobile css and errata */
+
 @media (min-width: 700px) and (max-width: 1000px) {
   #sidebar {
     display: none;