src/app/components/loader/full-page-loader/full-page-loader.component.ts
| selector | full-page-loader |
| styleUrls | full-page-loader.component.css |
| templateUrl | full-page-loader.component.html |
Properties |
Methods |
constructor(loader: LoaderStore, material: MaterialService)
|
|||||||||
|
Parameters :
|
| close |
close()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| model |
Default value : new LoaderModel()
|
import { Component, OnInit } from '@angular/core';
import { LoaderModel } from '../../../models/loader.model';
import { MaterialService } from '../../../providers';
import { LoaderStore } from '../loader.store';
@Component({
// tslint:disable-next-line:component-selector
selector: 'full-page-loader',
templateUrl: 'full-page-loader.component.html',
styleUrls: ['full-page-loader.component.css']
})
export class FullPageLoaderComponent implements OnInit {
model = new LoaderModel();
constructor(private loader: LoaderStore, private material: MaterialService) {}
ngOnInit() {
this.loader.isVisible$.subscribe(isVisible => {
this.model.setVisibility(isVisible);
if (isVisible) {
this.material.render();
}
});
this.loader.isSuccess$.subscribe(message => {
this.model.success(message);
});
this.loader.isError$.subscribe(message => {
this.model.error(message);
});
}
close() {
this.model.close();
}
}
<div *ngIf="model.visibility === model.states.visibility.VISIBLE" (click)="close()" class="backdrop">
<div class="mdl-grid no-spacing">
<div class="loading" *ngIf="model.completion === model.states.completion.NONE" class="mdl-cell mdl-cell--12-col center">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<br />
<h6 class="loading-text off-white">{{model.message}}</h6>
</div>
<div class="success" *ngIf="model.completion === model.states.completion.SUCCESS" class="mdl-cell mdl-cell--12-col center result-icon">
<i class="material-icons lg-font complete-icon">check_circle</i>
<h6 class="off-white">
<pre class="material-font">{{model.message}}</pre>
</h6>
</div>
<div class="error" *ngIf="model.completion === model.states.completion.ERROR" class="mdl-cell mdl-cell--12-col center result-icon">
<i class="material-icons lg-font fail-icon">error</i>
<h6 class="off-white">
<pre class="material-font">{{model.message}}</pre>
</h6>
<h5 class="subtext"><small>click anywhere to close</small></h5>
</div>
</div>
</div>
full-page-loader.component.css
.no-spacing {
margin: 0;
padding: 0;
}
.wide {
width: 100%;
}
.removed td {
opacity: 0.6;
text-decoration: line-through;
}
.backdrop {
position: absolute;
top: 0;
left: 0;
padding: 0px;
background: #fff;
z-index: 99;
width: 100%;
min-width: 100%;
min-height: 250%;
}
.mdl-js-spinner {
width: 100px;
height: 100px;
position: relative;
margin: 100px auto;
}
.loading-text {
margin-top: -2em;
color: #333;
font-size: 120%;
}
.center {
text-align: center;
}
/*TODO fix buttons to bottom of toolbar on scroll down*/
.off-white {
color: #333;
}
.lg-font {
font-size: 4em;
}
.complete-icon {
color: forestgreen;
}
.fail-icon {
color: #d50000;
}
.subtext {
color: #444;
margin-top: 2em;
}
.material-font {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.result-icon {
margin-top: 10%;
}