add a loader when transaction is sent

* closes #135

_src/_assets/javascripts/page-getstarted.js

@@ -117,11 +117,14 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
         }
     })
 
+    postButton.style.width = `${postButton.offsetWidth}px`
+
     postButton.addEventListener('click', function(e) {
         e.preventDefault()
 
         const message = messageInput.value
         postButton.classList.add('disabled')
+        postButton.innerHTML = '<span class="loader loader--dark"></span>'
 
         const alice = new driver.Ed25519Keypair()
         const tx = driver.Transaction.makeCreateTransaction(
@@ -165,6 +168,9 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
 
             const outputContent = reason.status + ' ' + reason.statusText
             output.textContent = outputContent
+
+            postButton.classList.remove('disabled')
+            postButton.innerHTML = 'Off you go'
         }).then((res) => console.log('Transaction status:', res.status))
 
     }, false)

_src/_assets/styles/_page-getstarted.scss

@@ -36,6 +36,10 @@
     .form-group:first-child {
         margin-top: 0;
     }
+
+    .message {
+        text-align: left;
+    }
 }
 
 .form--transaction__content {

_src/_assets/styles/bigchain.scss

@@ -16,6 +16,7 @@
 // Components
 @import 'bigchain/typography';
 @import 'bigchain/tables';
+@import 'bigchain/loader';
 @import 'bigchain/buttons';
 @import 'bigchain/forms';
 @import 'bigchain/input-group';

_src/_assets/styles/bigchain/_buttons.scss

@@ -47,6 +47,10 @@
         margin-right: .25rem;
         margin-bottom: -1px;
     }
+
+    .loader {
+        margin-bottom: -.2rem;
+    }
 }
 
 // Future-proof disabling of clicks on `<a>` elements

_src/_assets/styles/bigchain/_loader.scss

@@ -0,0 +1,31 @@
+.loader {
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+    text-indent: -9999rem;
+    border-top: 2px solid rgba(#fff, .2);
+    border-right: 2px solid rgba(#fff, .2);
+    border-bottom: 2px solid rgba(#fff, .2);
+    border-left: 2px solid #fff;
+    transform: translateZ(0);
+    animation: spin 1.1s infinite linear;
+    display: inline-block;
+}
+
+.loader--dark {
+    border-top-color: rgba($brand-main-blue, .2);
+    border-right-color: rgba($brand-main-blue, .2);
+    border-bottom-color: rgba($brand-main-blue, .2);
+    border-left-color: $brand-main-blue;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}