Merge pull request #144 from krishnakumarp/master

Added ability to set the background-color of the spinner backdrop. Fixes #143

Author: mpalourdio

README.md

@@ -91,6 +91,7 @@ You can customize the following parameters:
   - The **extra duration** (ie. how many extra milliseconds should the spinner be visible).
   - The **minimum duration** (ie. how many milliseconds should the spinner be visible at least).
   - The spinner **opacity**.
+  - The backdrop **background-color** (ie. the color of the spinner backdrop, if enabled).
   - The **spinner type**.
 
 ```xml
@@ -101,6 +102,7 @@ You can customize the following parameters:
     [extraDuration]="300"
     [minDuration]="300"
     [opacity]=".6"
+    [backdropBackgroundColor]="#777777"
     [spinner]="spinkit.skWave">
 </ng-http-loader>
 ```

src/lib/components/_variables.scss

@@ -4,4 +4,3 @@ $spinkit-top: 50% !default;
 $spinkit-position: relative !default;
 
 $spinner-color: #333 !default;
-$backdrop-background-color: #f1f1f1 !default;

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

@@ -1,7 +1,8 @@
 <div id="spinner"
      *ngIf="isVisible$ | async"
      [class.backdrop]="backdrop"
-     [style.opacity]="opacity">
+     [style.opacity]="opacity"
+     [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 

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

@@ -12,7 +12,6 @@
         left: 0;
         height: 100%;
         width: 100%;
-        background-color: $backdrop-background-color;
         display: flex;
         align-items: center;
         justify-content: center;

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

@@ -35,6 +35,7 @@ export class NgHttpLoaderComponent implements OnInit {
     @Input() public filteredUrlPatterns: string[] = [];
     @Input() public minDuration = 0;
     @Input() public opacity = '.7';
+    @Input() public backdropBackgroundColor = '#f1f1f1';
     @Input() public spinner: string | null = Spinkit.skWave;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {

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

@@ -798,4 +798,42 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element.style.opacity).toBe(`0${component.opacity}`);
     });
+
+    it('should have a default backdrop background color if backdrop is true', () => {
+        component.isVisible$ = of(true);
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('rgb(241, 241, 241)');
+    });
+
+    it('should be possible to override backdrop background color when backdrop is true', () => {
+        component.isVisible$ = of(true);
+        component.backdropBackgroundColor = '#777777';
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('rgb(119, 119, 119)');
+    });
+
+    it('should not have a transparent backdrop background color if backdrop is false', () => {
+        component.isVisible$ = of(true);
+        component.backdrop = false;
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.backgroundColor).toBe('transparent');
+    });
 });