Ems-web-app-loader NPM

EMS Web Application Components: Loader Animation (spinner or ellipsis)

The Loader Angular.io module is authored for use within web applications developed by Educational Media Solutions.

Find the web application template source code on GitHub to review implementation in context.

Find a working example of this component here.

The embedded component and service expose an interface for rendering a modal overlay and loader animation during server transactions.

This library was generated with Angular CLI version 13.2.0.

Usage

Module Import:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';  

import { AppComponent } from './app.component';
import { LoaderModule, LoaderService } from "ems-web-app-loader"

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    LoaderModule
  ],
  providers: [ LoaderService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage in component:

import { Component } from '@angular/core';
import { LoaderService, LoaderType } from "ems-web-app-loader";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  public loading: boolean = false;
  constructor(private loader: LoaderService) {}
  toggleLoader() {
    this.loading = !this.loading;
    this.loader.load(this.loading, LoaderType.Ellipsis);
  }
  showLoader() {
  	this.loader.show();
  }
  hideLoader() {
  	this.loader.hide();
  }
}

Note that the loader type defaults to Loader.Spinner. If you want to use the ellipsis loader, you must call the load method at least once (as pictured above.) Subsequent show/hide calls will preserve this configuration

Supported loader types:

LoaderType.Spinner
LoaderType.Ellipsis

Service interface:

load: (show: boolean, type: LoaderType = LoaderType.Spinner) => void; (initializes loader)
show: () => void; shows default or previously initialized loader
hide: () => void; hides default or previously initialized loader

Template Usage (settings for spinner):

<button click="showLoader()">Load</button>	
<loader [transition-speed]="2000" [animation-duration]="1000" [z-index]="100" [size]="200" color="#0099ff" background="rgba(0,255,0,0.25)" ></loader>

Template Usage (settings for ellipsis):

<loader [transition-speed]="2000" [animation-duration]="600" [z-index]="100" [size]="13" color="#0099ff" background="rgba(0,255,0,0.25)" ></loader>

Template attributes with defaults:

"transition-speed": number = 1000; // speed of fade in / fade out
"animation-duration": number = 1000; //larger numbers slow down animation
"size": number = 200; //in px ; 200 is good for spinner, 14 good for ellipsis
"color": string = "#001F39"; //loader color
"background": string = "rgba(255,255,255,0.25)"; //modal background
"z-index": number = 10000;