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 @@ ...@@ -40,9 +40,15 @@
</form> </form>
</div> </div>
<!-- /row--> <!-- /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> <button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid || isDecrypting" (click)="onDecryptClicked()">Decrypt</button>
</div> </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> </div>
<!-- /row--> <!-- /row-->
<div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet"> <div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">
......
...@@ -31,9 +31,15 @@ ...@@ -31,9 +31,15 @@
</form> </form>
</div> </div>
<!-- /row--> <!-- /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> <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid || isCreating" (click)="onCreateClicked()">Create</button>
</div> </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--> <!-- /row-->
</div> </div>
<!-- /container--> <!-- /container-->
......
...@@ -35,9 +35,15 @@ ...@@ -35,9 +35,15 @@
</form> </form>
</div> </div>
<!-- /row--> <!-- /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> <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid || isRecovering" (click)="onRecoverClicked()">Recover</button>
</div> </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--> <!-- /row-->
</div> </div>
<!-- /container--> <!-- /container-->
......
...@@ -54,9 +54,15 @@ ...@@ -54,9 +54,15 @@
<div class="row d-flex justify-content-center"> <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> <a><button type="button" class="btn btn-link col-12" (click)="activeModal.close('Close click')">Cancel</button></a>
</div> </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> <button type="submit" class="btn btn-lg btn-primary" [disabled]="!sendForm.valid || isSending" (click)="send()">Send</button>
</div> </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> </div>
</div> </div>
...@@ -534,6 +534,49 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000); ...@@ -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
#Tumblebit { #Tumblebit {
padding-top: 4em; padding-top: 4em;
......
...@@ -869,6 +869,51 @@ input.cmn-toggle-round-flat:checked + label:after { ...@@ -869,6 +869,51 @@ input.cmn-toggle-round-flat:checked + label:after {
color: #1B354B; 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 { #Tumblebit {
padding-top: 4em; 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