Commit 8174bc53 authored by Benoît's avatar Benoît

add a decent loading page ;)

parent 6692e4eb
<div *ngIf="loading">Loading...</div> <div *ngIf="loading">
<div class="login d-flex align-items-center text-center">
<div class="container">
<div class="mb-4">
<svg version="1.1" id="loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<!-- /row-->
<div>
<em class="display-4 text-center">Loading the future... </em>
</div>
<!-- /row-->
</div>
<!-- /container-->
</div>
<!-- /login-->
</div>
<router-outlet *ngIf="!loading"></router-outlet> <router-outlet *ngIf="!loading"></router-outlet>
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="creationDate">Creation Date (optional)</label> <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
<material-datepicker class="form-control col-4" [(date)]="creationDate"></material-datepicker> <material-datepicker class="form-control col-7" [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-12 row" for="walletMnemonic">12 Secret Words</label> <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
......
...@@ -28,6 +28,26 @@ code {color: $spacegray !important;} ...@@ -28,6 +28,26 @@ code {color: $spacegray !important;}
} }
} }
// loading
#loading {
width: 150px;
height: 150px;
display:inline-block;
fill: $darkgray !important;
}
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
em {
&.display-4 {
font-size: 1.6em;
color: $darkgray;
font-weight: 400;
padding-right: 5px;
border-right: .1em solid $blue;
white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
}
}
// datepicker // datepicker
.datepicker__input { .datepicker__input {
border-color: transparent !important; border-color: transparent !important;
......
...@@ -26,21 +26,11 @@ code { ...@@ -26,21 +26,11 @@ code {
} }
/* Mozilla Firefox 4 to 18 */ /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder {
color: #d4d8df;
}
/* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { .form-control:-ms-input-placeholder {
color: #d4d8df; color: #d4d8df;
} }
/* Internet Explorer 10-11 */ /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
color: #d4d8df;
}
/* Microsoft Edge */
.twitter { .twitter {
border-color: #2FBAFF !important; border-color: #2FBAFF !important;
color: #2FBAFF !important; color: #2FBAFF !important;
...@@ -61,6 +51,29 @@ code { ...@@ -61,6 +51,29 @@ code {
color: #fff !important; color: #fff !important;
} }
#loading {
width: 150px;
height: 150px;
display: inline-block;
fill: #1B354B !important;
}
@-webkit-keyframes blink-caret {
50% {
border-color: transparent;
}
}
em.display-4 {
font-size: 1.6em;
color: #1B354B;
font-weight: 400;
padding-right: 5px;
border-right: 0.1em solid #7385A0;
white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
}
.datepicker__input { .datepicker__input {
border-color: transparent !important; border-color: transparent !important;
padding: 0 !important; padding: 0 !important;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment