diff --git a/README.md b/README.md
index bf9e13e..ffc7d13 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,7 @@ You can customize the following parameters:
- The spinner **opacity**.
- The backdrop **background-color** (ie. the color of the spinner backdrop, if enabled).
- The **spinner type**.
+ - The spinner **style**.
```xml
+ [customStyle]="{'z-index': 100}"
```
diff --git a/src/lib/components/ng-http-loader.component.html b/src/lib/components/ng-http-loader.component.html
index e912f62..a5a5384 100644
--- a/src/lib/components/ng-http-loader.component.html
+++ b/src/lib/components/ng-http-loader.component.html
@@ -2,7 +2,8 @@
*ngIf="isVisible$ | async"
[class.backdrop]="backdrop"
[style.opacity]="opacity"
- [ngStyle]="{'background-color': backdrop ? backdropBackgroundColor : 'transparent'}">
+ [style.backgroundColor]="backdrop ? backdropBackgroundColor : 'transparent'"
+ [ngStyle]="customStyle">
diff --git a/src/lib/components/ng-http-loader.component.ts b/src/lib/components/ng-http-loader.component.ts
index 25d194c..eb59383 100644
--- a/src/lib/components/ng-http-loader.component.ts
+++ b/src/lib/components/ng-http-loader.component.ts
@@ -37,6 +37,7 @@ export class NgHttpLoaderComponent implements OnInit {
@Input() opacity = '.7';
@Input() backdropBackgroundColor = '#f1f1f1';
@Input() spinner: string | null = Spinkit.skWave;
+ @Input() customStyle: { [klass: string]: any; } = {};
constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {
}
diff --git a/src/test/components/ng-http-loader.component.spec.ts b/src/test/components/ng-http-loader.component.spec.ts
index 1467f0e..9b351ab 100644
--- a/src/test/components/ng-http-loader.component.spec.ts
+++ b/src/test/components/ng-http-loader.component.spec.ts
@@ -836,4 +836,17 @@ describe('NgHttpLoaderComponent', () => {
expect(element.style.backgroundColor).toBe('transparent');
});
+
+ it("should apply custom styling", () => {
+ component.isVisible$ = of(true);
+ component.customStyle = {"z-index": 86};
+ fixture.detectChanges();
+
+ const element: HTMLElement = fixture
+ .debugElement
+ .query(By.css('#spinner'))
+ .nativeElement;
+
+ expect(element.style.zIndex).toBe("86");
+ });
});