import { Component, Input, ElementRef } from "@angular/core";
import { ScriptAnimations } from "src/app/helpers/ScriptAnimations";
@Component({
    selector: "app-blokker",
    templateUrl: "./blokker.component.html",
    styleUrls: ["./blokker.component.less"]
})
export class BlokkerComponent {
    private _visible = false;
    @Input()
    set visible(value: boolean) {
        if (value != this._visible)
        {
            this._visible = value;
            this.animateVisible();
        }
    }
    get visible() {
        return this._visible;
    }
    constructor(private _element: ElementRef)
    {
    }
    animateVisible()
    {
        if (this.visible) {
            ScriptAnimations.animateFadeIn(this._element, 200);
        } else {
            ScriptAnimations.animateFadeOut(this._element, 200);
        }
    }
}

<div class="inner">
    <i class="fas fa-cog fa-spin"></i>
</div>

:host {
    position:absolute;
    top:0;left:0;
    width: 100%;height:100%;
    background-color: rgba(0.9,0.9,0.9,0.1);
    box-shadow: 0 0 2px 2px rgba(0.9,0.9,0.9,0.1);
}
.inner {
    position:absolute;
    top:50%;left:50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    color: #ffffff;
}