diff --git a/app/components/Onboarding/Syncing.js b/app/components/Onboarding/Syncing.js
index 2df806d6..a408359d 100644
--- a/app/components/Onboarding/Syncing.js
+++ b/app/components/Onboarding/Syncing.js
@@ -37,23 +37,29 @@ class Syncing extends Component {
Might as well fund your wallet while you're waiting to sync.
-
-
-
+ {address.length ? (
+
-
-
+ ) : (
+
+ )}
Syncing to the blockchain...
diff --git a/app/components/Onboarding/Syncing.scss b/app/components/Onboarding/Syncing.scss
index 28466895..27c8b824 100644
--- a/app/components/Onboarding/Syncing.scss
+++ b/app/components/Onboarding/Syncing.scss
@@ -96,3 +96,42 @@
margin-top: 10px;
}
}
+
+.spinner {
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-left-color: rgba(0, 0, 0, 0.4);
+ -webkit-border-radius: 999px;
+ -moz-border-radius: 999px;
+ border-radius: 999px;
+ margin: 0 auto;
+ height: 75px;
+ width: 75px;
+ -webkit-animation: animation-rotate 1000ms linear infinite;
+ -moz-animation: animation-rotate 1000ms linear infinite;
+ -o-animation: animation-rotate 1000ms linear infinite;
+ animation: animation-rotate 1000ms linear infinite;
+}
+
+@-webkit-keyframes animation-rotate {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@-moz-keyframes animation-rotate {
+ 100% {
+ -moz-transform: rotate(360deg);
+ }
+}
+
+@-o-keyframes animation-rotate {
+ 100% {
+ -o-transform: rotate(360deg);
+ }
+}
+
+@keyframes animation-rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}