add fade

src/app/spinner/spinner.component.html

@@ -1,2 +1,2 @@
 
-<div class="spinner" *ngIf="show"></div>
+<div class="spinner" #spinner></div>

src/app/spinner/spinner.component.scss

@@ -6,14 +6,10 @@
   left: 0;
   height: 100vh;
   width: 100vw;
-  background: $black-alpha;
+  background: $yellow-alpha;
   background-image: url('/assets/images/loader.svg');
   background-size: 200px 200px;
   background-repeat: no-repeat;
   background-position: center center;
   z-index: 100;
-
-  &.active {
-    display: block;
-  }
 }

src/app/spinner/spinner.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'
+import { Component, OnInit, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core'
 
 @Component({
   selector: 'app-spinner',
@@ -13,7 +13,13 @@ export class SpinnerComponent implements OnInit {
 
   ngOnInit(): void {
   }
-/*
+
+  ngOnChanges(changes: SimpleChanges) {
+    if(changes.show && changes.show.firstChange) {
+      this.loader(changes.show.currentValue ? 'show' : 'hide')
+    }
+  }
+
   loader(action) {
     let op = 0
     let timer = null
@@ -29,7 +35,7 @@ export class SpinnerComponent implements OnInit {
             this.spinner.nativeElement.style.opacity = op
             this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")"
             op -= op * 0.1
-        }, 50)
+        }, 20)
 
         break
       case 'hide':
@@ -42,9 +48,9 @@ export class SpinnerComponent implements OnInit {
             this.spinner.nativeElement.style.opacity = op
             this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")"
             op += op * 0.1
-        }, 50)
+        }, 20)
 
         break
     }
-  }*/
+  }
 }