Add the 'backdrop' option, which allows to make the spinner background clickable.

Author: mpalourdio

src/lib/components/ng-http-loader.component.html

@@ -1,4 +1,4 @@
-<div id="spinner" *ngIf="isVisible$ | async">
+<div id="spinner" [class.backdrop]="backdrop" *ngIf="isVisible$ | async">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 

src/lib/components/ng-http-loader.component.scss

@@ -1,17 +1,24 @@
 @import "variables";
 
 #spinner {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
+    top: 50% ;
+    left: 50%;
+    transform: translate(-50%, -50%);
     position: fixed;
     z-index: 9999;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     opacity: $spinner-opacity;
-    background-color: $spinner-background-color;
+
+    &.backdrop {
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: $spinner-background-color;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: none;
+    }
 }
 
 ::ng-deep .colored-parent, ::ng-deep .colored > div {

src/lib/components/ng-http-loader.component.ts

@@ -43,6 +43,8 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     public extraDuration = 0;
     @Input()
     public entryComponent: any = null;
+    @Input()
+    public backdrop = true;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
         const [showSpinner$, hideSpinner$] = partition((h: boolean) => h)(this.pendingRequestsInterceptor.pendingRequestsStatus$);

src/test/components/ng-http-loader.component.spec.ts

@@ -852,4 +852,30 @@ describe('NgHttpLoaderComponent', () => {
             component.isVisible$.subscribe(v => expect(v).toBeFalsy()).unsubscribe();
         }
     )));
+
+    it('should set the backdrop CSS class by default', () => {
+        spyOnProperty(component, 'isVisible$')
+            .and.returnValue(new BehaviorSubject(true).asObservable());
+        fixture.detectChanges();
+
+        const element = fixture
+            .debugElement
+            .query(By.css('.backdrop'))
+            .nativeElement;
+
+        expect(element).toBeTruthy();
+    });
+
+    it('should be possible to remove the backdrop class', () => {
+        spyOnProperty(component, 'isVisible$')
+            .and.returnValue(new BehaviorSubject(true).asObservable());
+        component.backdrop = false;
+        fixture.detectChanges();
+
+        const element = fixture
+            .debugElement
+            .query(By.css('.backdrop'));
+
+        expect(element).toBeNull();
+    });
 });