diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js
index 594b49b..87ada69 100644
--- a/_src/_assets/javascripts/page-getstarted.js
+++ b/_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 = ''
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)
diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index d59e7d7..326880d 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -36,6 +36,10 @@
.form-group:first-child {
margin-top: 0;
}
+
+ .message {
+ text-align: left;
+ }
}
.form--transaction__content {
diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss
index 9c2e4f2..4e98451 100644
--- a/_src/_assets/styles/bigchain.scss
+++ b/_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';
diff --git a/_src/_assets/styles/bigchain/_buttons.scss b/_src/_assets/styles/bigchain/_buttons.scss
index fdbba0e..24d680e 100644
--- a/_src/_assets/styles/bigchain/_buttons.scss
+++ b/_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 `` elements
diff --git a/_src/_assets/styles/bigchain/_loader.scss b/_src/_assets/styles/bigchain/_loader.scss
new file mode 100644
index 0000000..91e50e7
--- /dev/null
+++ b/_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);
+ }
+}