Unverified Commit 12ff9a07 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #352 from stratisproject/ui

Add loading indicator to login, create, recovery and sending process
parents bacecc47 4671564c
......@@ -40,9 +40,15 @@
</form>
</div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<div class="row d-flex justify-content-center" *ngIf="!isDecrypting">
<button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid || isDecrypting" (click)="onDecryptClicked()">Decrypt</button>
</div>
<div class="row d-flex justify-content-center" *ngIf="isDecrypting">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<!-- /row-->
<div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">
......
......@@ -31,9 +31,15 @@
</form>
</div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<div class="row d-flex justify-content-center" *ngIf="!isCreating">
<button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid || isCreating" (click)="onCreateClicked()">Create</button>
</div>
<div class="row d-flex justify-content-center" *ngIf="isCreating">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- /row-->
</div>
<!-- /container-->
......
......@@ -35,9 +35,15 @@
</form>
</div>
<!-- /row-->
<div class="row d-flex justify-content-center">
<div class="row d-flex justify-content-center" *ngIf="!isRecovering">
<button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid || isRecovering" (click)="onRecoverClicked()">Recover</button>
</div>
<div class="row d-flex justify-content-center" *ngIf="isRecovering">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- /row-->
</div>
<!-- /container-->
......
......@@ -54,9 +54,15 @@
<div class="row d-flex justify-content-center">
<a><button type="button" class="btn btn-link col-12" (click)="activeModal.close('Close click')">Cancel</button></a>
</div>
<div class="modal-footer">
<div class="modal-footer" *ngIf="!isSending">
<button type="submit" class="btn btn-lg btn-primary" [disabled]="!sendForm.valid || isSending" (click)="send()">Send</button>
</div>
<div class="modal-footer" *ngIf="isSending">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
</div>
......@@ -534,6 +534,49 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
}
}
// Loading spinner
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 0 auto;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Tumblebit
#Tumblebit {
padding-top: 4em;
......
......@@ -869,6 +869,51 @@ input.cmn-toggle-round-flat:checked + label:after {
color: #1B354B;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 0 auto;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
#Tumblebit {
padding-top: 4em;
}
......
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