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 ? ( +
+
+ +
+
+ {address} + copy +
-
- {address} - copy -
-
+ ) : ( +
+
+
+ )}

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); + } +}