src/app/components/loader/loading-linear/loading-linear.component.ts
| selector | app-loading-linear |
| styleUrls | ./loading-linear.component.css |
| templateUrl | ./loading-linear.component.html |
Methods |
Inputs |
constructor(materialService: MaterialService)
|
||||||
|
Parameters :
|
| loadingLinearMessage | |
Type : string
|
|
Default value : 'Finding Your Accounts'
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit, Input } from '@angular/core';
import { MaterialService } from '../../../providers';
@Component({
selector: 'app-loading-linear',
templateUrl: './loading-linear.component.html',
styleUrls: ['./loading-linear.component.css']
})
export class LoadingLinearComponent implements OnInit {
@Input() loadingLinearMessage = 'Finding Your Accounts';
constructor(private materialService: MaterialService) {}
ngOnInit() {
console.log('app-loading-linear component loaded');
this.materialService.render();
}
}
<div class="linear-loading-container">
<div class="loading-message text-center">{{loadingLinearMessage}}</div>
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
./loading-linear.component.css
.linear-loading-container {
width: 130px;
margin: 10px auto 10px auto;
}
.loading-message {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: -2px;
color: #707173;
text-align: center;
}