4 files changed, 124 insertions, 0 deletions
diff --git a/src/angular/loader/loader.component.html.ts b/src/angular/loader/loader.component.html.ts
new file mode 100644
index 0000000..074854a
--- /dev/null
+++ b/src/angular/loader/loader.component.html.ts
@@ -0,0 +1,13 @@
+export const template = `
+<div class = "sdc-loader-wrapper" *ngIf="!global">
+    <div class="sdc-loader-background" *ngIf="active">
+        <div class="sdc-loader {{ size }}" *ngIf="active"></div>
+    </div>
+    <ng-content></ng-content>
+</div>
+<div  *ngIf="global&&active">
+    <div class="sdc-loader-global-wrapper sdc-loader-background" >
+        <div class="sdc-loader {{ size }}"></div>
+    </div>
+</div>
+`;
diff --git a/src/angular/loader/loader.component.ts b/src/angular/loader/loader.component.ts
new file mode 100644
index 0000000..353a98c
--- /dev/null
+++ b/src/angular/loader/loader.component.ts
@@ -0,0 +1,53 @@
+import { Component, Input, ViewContainerRef, Inject, OnInit, OnDestroy, Output, EventEmitter } from "@angular/core";
+import { template } from "./loader.component.html";
+import { LoaderService } from "./loader.service";
+
+export enum LoaderSize {
+    large = 'large',
+    medium = 'medium',
+    small = 'small',
+}
+
+@Component({
+    selector: "sdc-loader",
+    template: template
+})
+
+export class LoaderComponent implements OnInit, OnDestroy {
+    @Input() active: number;
+    @Input() size?: LoaderSize; // small || medium || large
+    @Input() global?: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page.
+    @Input() name?: string;
+    @Output() activeChange: EventEmitter<number> = new EventEmitter<number>();
+
+    constructor(private loaderService: LoaderService) {
+        this.active = 0;
+        this.size = LoaderSize.large;
+        this.global = false;
+    }
+
+    public ngOnInit(): void {
+        if (this.name !== undefined) {
+            this.loaderService.register(this.name, this);
+        }
+    }
+
+    public ngOnDestroy(): void {
+        if (this.name !== undefined) {
+            this.loaderService.unregister(this.name);
+        }
+    }
+
+    public activate() {
+        this.active++;
+        this.activeChange.emit(this.active);
+    }
+
+    public deactivate() {
+        if (this.active > 0) {
+            this.active--;
+            this.activeChange.emit(this.active);
+        }
+    }
+
+}
diff --git a/src/angular/loader/loader.module.ts b/src/angular/loader/loader.module.ts
new file mode 100644
index 0000000..8914173
--- /dev/null
+++ b/src/angular/loader/loader.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { LoaderComponent } from "./loader.component";
+import { CommonModule } from "@angular/common";
+import { LoaderService } from "./loader.service";
+
+@NgModule({
+    declarations: [
+        LoaderComponent
+    ],
+    imports: [
+        CommonModule,
+    ],
+    exports: [
+        LoaderComponent
+    ],
+    providers: [
+        LoaderService
+    ]
+})
+
+export class LoaderModule {}
diff --git a/src/angular/loader/loader.service.ts b/src/angular/loader/loader.service.ts
new file mode 100644
index 0000000..288f9bd
--- /dev/null
+++ b/src/angular/loader/loader.service.ts
@@ -0,0 +1,37 @@
+import { Injectable, Type, ComponentRef } from '@angular/core';
+import { LoaderComponent } from './loader.component';
+
+@Injectable()
+export class LoaderService {
+
+    constructor() {}
+
+    private mainLoaderName = 'general';
+
+    public registeredLoaders = {};
+
+    public register(name: string, loader: LoaderComponent) {
+        if (!this.registeredLoaders[name]) {
+            this.registeredLoaders[name] = loader;
+        }
+    }
+
+    public unregister(name: string) {
+        if (this.registeredLoaders[name]) {
+            delete this.registeredLoaders[name];
+        }
+    }
+
+    public activate(name: string = this.mainLoaderName) {
+        if (this.registeredLoaders[name]) {
+            this.registeredLoaders[name].activate();
+        }
+    }
+
+    public deactivate(name: string = this.mainLoaderName) {
+        if (this.registeredLoaders[name]) {
+            this.registeredLoaders[name].deactivate();
+        }
+    }
+
+}