2 files changed, 80 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;
diff --git a/public/assets/js/vendor/view/formview.js b/public/assets/js/vendor/view/formview.js
index 97d16fe..21f3170 100644
--- a/public/assets/js/vendor/view/formview.js
+++ b/public/assets/js/vendor/view/formview.js
@@ -97,6 +97,7 @@ var FormView = View.extend({
       headers.append("content-type", "application/json")
     }
     
+    this.$form.addClass('sending')
     fetch(action, {
       method: this.method.toUpperCase(),
       headers: headers,
@@ -104,6 +105,7 @@ var FormView = View.extend({
       body: data,
     }).then(raw => raw.json())
     .then(response => {
+      this.$form.removeClass('sending')
       if (response.error) {
         var errors = []
         if (response.error.errors && response.error.errors.length) {
@@ -129,6 +131,7 @@ var FormView = View.extend({
       }
     }).catch(response => {
       console.log(response)
+      this.$form.removeClass('sending')
       var errors = []
       if (response.error) {
         if (response.error.errors && response.error.errors.length) {