Add lazy loading indicator

feature/user-self-management
Florian Hartwich 2017-09-09 06:00:25 +02:00
parent e346527df7
commit 51f78bd5f3
8 changed files with 44 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.4.1", "version": "1.4.2",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@ -41,7 +41,6 @@
"devDependencies": { "devDependencies": {
"@types/jasmine": "2.5.38", "@types/jasmine": "2.5.38",
"@types/node": "~6.0.60", "@types/node": "~6.0.60",
"@types/systemjs": "^0.20.4",
"codelyzer": "~2.0.0-beta.1", "codelyzer": "~2.0.0-beta.1",
"jasmine-core": "^2.5.2", "jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0", "jasmine-spec-reporter": "^3.2.0",

View File

@ -87,6 +87,7 @@
</div> </div>
<div class="content"> <div class="content">
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
<div id="left"> <div id="left">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>

View File

@ -1,5 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {Router} from '@angular/router'; import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {LoginService} from './services/login-service/login-service'; import {LoginService} from './services/login-service/login-service';
import {PromotionService} from "./services/promotion-service/promotion.service"; import {PromotionService} from "./services/promotion-service/promotion.service";
import {AwardingService} from "./services/awarding-service/awarding.service"; import {AwardingService} from "./services/awarding-service/awarding.service";
@ -8,16 +8,26 @@ import {RouteConfig} from "./app.config";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: 'app.component.html', templateUrl: 'app.component.html',
styleUrls: ['app.component.css'] styleUrls: ['app.component.css', 'style/load-indicator.css']
}) })
export class AppComponent { export class AppComponent {
config = RouteConfig; config = RouteConfig;
loading: boolean = false;
constructor(private loginService: LoginService, constructor(private loginService: LoginService,
private promotionService: PromotionService, private promotionService: PromotionService,
private awardingService: AwardingService, private awardingService: AwardingService,
private router: Router) { private router: Router) {
router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.loading = true;
}
if (event instanceof NavigationEnd) {
this.loading = false;
}
});
} }

View File

@ -79,7 +79,7 @@
Bestätigen Bestätigen
</button> </button>
<span *ngIf="loading" class="load-arrow glyphicon-refresh-animate"></span> <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
<span *ngIf="showErrorLabel" <span *ngIf="showErrorLabel"
class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px"> class="center-block label label-danger" style="font-size: medium; padding: 2px; margin-top: 2px">
{{error}} {{error}}

View File

@ -8,7 +8,7 @@ import {War} from "../../models/model-interfaces";
@Component({ @Component({
selector: 'war-submit', selector: 'war-submit',
templateUrl: './war-submit.component.html', templateUrl: './war-submit.component.html',
styleUrls: ['./war-submit.component.css'] styleUrls: ['./war-submit.component.css', '../../style/load-indicator.css']
}) })
export class WarSubmitComponent { export class WarSubmitComponent {

View File

@ -0,0 +1,28 @@
.load-indicator {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:50%;
}
.load-arrow {
background: url(../../assets/loading.png) no-repeat;
display: block;
width: 80px;
height: 80px;
}
/* Loading Animation */
.glyphicon-refresh-animate {
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB