File
Implements
|
cssclass
|
Type : string
|
Default value : ''
|
|
|
|
header
|
Type : string
|
Default value : 'Retrieving Data'
|
|
|
|
message
|
Type : string
|
Default value : 'Please wait a moment while we retrieve your information.'
|
|
|
import { Component, Input, OnInit } from '@angular/core';
import { MaterialService } from '../../providers';
@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.css']
})
export class LoaderComponent implements OnInit {
@Input() header = 'Retrieving Data';
@Input() message = 'Please wait a moment while we retrieve your information.';
@Input() cssclass = '';
constructor(private materialService: MaterialService) {}
ngOnInit() {
console.log('app-loader component loaded');
this.materialService.render();
}
}
<div id="loadingData" class="empty-page-ctn loading-ctn {{cssclass}}">
<div class="loading-more-ctn">
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div>
<h3 class="status-header status-normal">{{header}}</h3>
<div class="page-description">
<p class="para-medium">{{message}}</p>
</div>
</div>
.loading-more-ctn .mdl-spinner {
width: 90px;
height: 90px;
margin-bottom: 30px;
}
.loading-ctn {
margin-top: calc(50vh - 150px);
}
.short-spinner {
margin-top: 25vh;
}
Legend
Html element with directive