mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-11-04 12:12:55 +00:00
Code Issues Releases Wiki Activity

Add spinning reload animation for Satan's grace

Browse Source
This commit is contained in:
Kristóf Tóth
2018-02-28 15:05:51 +01:00
parent 52298cbd8c
commit 277d253fbf
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/webide/webide.component.html
View File

@@ -27,4 +27,4 @@
[class.disabled]="saveButtonState === 'SAVING'" [class.disabled]="saveButtonState === 'SAVING'"
><span *ngIf="saveButtonState === 'DIRTY'">Save!</span> ><span *ngIf="saveButtonState === 'DIRTY'">Save!</span>
<span *ngIf="saveButtonState === 'SAVED'">Done!</span> <span *ngIf="saveButtonState === 'SAVED'">Done!</span>
<span *ngIf="saveButtonState === 'SAVING'">Reloading...</span></button> <span *ngIf="saveButtonState === 'SAVING'"><div class="loader"></div>Reloading...</span></button>

18
src/app/webide/webide.component.scss
View File

@@ -7,3 +7,21 @@
.btn-secondary { .btn-secondary {
border-radius: 0; border-radius: 0;
} }
.loader {
border: 2px solid #ffffff;
border-radius: 50%;
border-top: 2px solid #212529;
width: 15px;
height: 15px;
animation: spin 2s linear infinite;
display: inline-block;
margin-right: 5px;
position: relative;
top: 2px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}