adminui documentation
  1. Components
  2. FullPageLoaderComponent

File

src/app/modules/loader/loader.component.ts

Implements

OnInit

Metadata

selector app-loader
styleUrls loader.component.css
templateUrl loader.component.html

Index

Properties
Methods

Constructor

constructor(loader: LoaderStore)
Defined in src/app/modules/loader/loader.component.ts:11
Parameters :
Name Type Optional
loader LoaderStore No

Methods

close
close()
Defined in src/app/modules/loader/loader.component.ts:32
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/modules/loader/loader.component.ts:14
Returns : void

Properties

model
model:
Default value : new LoaderModel()
Defined in src/app/modules/loader/loader.component.ts:11
 
import { Component, OnInit } from '@angular/core';
import { LoaderModel } from './loader.model';
import { LoaderStore } from './loader.store';

@Component({
  selector: 'app-loader',
  templateUrl: 'loader.component.html',
  styleUrls: ['loader.component.css']
})
export class FullPageLoaderComponent implements OnInit {
  model = new LoaderModel();
  constructor(private loader: LoaderStore) { }

  ngOnInit() {
    this.loader.updateMessage$.subscribe(message => {
      this.model.setMessage(message);
    });

    this.loader.isVisible$.subscribe(isVisible => {
      this.model.setVisibility(isVisible);
    });

    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 fxFill fxLayout="row" fxLayoutAlign="center start">
    <div *ngIf="model.completion === model.states.completion.NONE" fxFlex="33" fxLayout="column" fxLayoutAlign="start center">
      <mat-progress-spinner mode="indeterminate" class="center"></mat-progress-spinner>
      <h6 class="loading-text off-white">{{model.message}}</h6>
    </div>
    <div *ngIf="model.completion === model.states.completion.SUCCESS" class="center result-icon">
      <mat-icon class="lg-font complete-icon">check_circle</mat-icon>
      <h6 class="off-white">
        <pre class="material-font">{{model.message}}</pre>
      </h6>
    </div>
    <div *ngIf="model.completion === model.states.completion.ERROR" class="center result-icon">
      <mat-icon class="lg-font fail-icon">error</mat-icon>
      <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>

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 {
  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%;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""