napster2210 / ngx-spinner Goto Github PK

Need a close button at that top-right for close button over black-overlay.

When runtime, my app throw this message at console :
'ngx-spinner' is not a known element:

1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
   
   
   [ERROR ->]<ngx-spinner bdColor = "rgba(51, 51, 51, 0.8)" size = "medium" color = "#fff" type = "ball-clip-rotat"): ng:///DetailCustomerModule/DetailRepresentativeComponent.html@209:8
   at syntaxError (compiler.js:485)
   at TemplateParser.parse (compiler.js:24668)
   at JitCompiler._parseTemplate (compiler.js:34621)
   at JitCompiler._compileTemplate (compiler.js:34596)
   at eval (compiler.js:34497)
   at Set.forEach ()
   at JitCompiler._compileComponents (compiler.js:34497)
   at eval (compiler.js:34367)
   at Object.then (compiler.js:474)
   at JitCompiler._compileModuleAndComponents (compiler.js:34366)
   at syntaxError (compiler.js:485)
   at TemplateParser.parse (compiler.js:24668)
   at JitCompiler._parseTemplate (compiler.js:34621)
   at JitCompiler._compileTemplate (compiler.js:34596)
   at eval (compiler.js:34497)
   at Set.forEach ()
   at JitCompiler._compileComponents (compiler.js:34497)
   at eval (compiler.js:34367)
   at Object.then (compiler.js:474)
   at JitCompiler._compileModuleAndComponents (compiler.js:34366)
   at resolvePromise (zone.js:809)
   at resolvePromise (zone.js:775)
   at eval (zone.js:858)
   at ZoneDelegate.invokeTask (zone.js:421)
   at Object.onInvokeTask (core.js:4740)
   at ZoneDelegate.invokeTask (zone.js:420)
   at Zone.runTask (zone.js:188)
   at drainMicroTaskQueue (zone.js:595)
   at ZoneTask.invokeTask [as invoke] (zone.js:500)
   at invokeTask (zone.js:1517)

Can do you support me
Thanks !

Hi, Like as enhancement, will be great if we can add a custom gif image or icon to use for spinner.

WARNING in ./node_modules/ngx-spinner/fesm5/ngx-spinner.js
69:59-75 "export 'defineInjectable' was not found in '@angular/core'
at HarmonyImportSpecifierDependency._getErrors

Hello,

The ngx-spinner version 1.1.0 should work on Angular 5.2.9 ?

$>npm install ngx-spinner@latest --save
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.

"dependencies": {
"@angular/animations": "^5.2.9",
"@angular/common": "^5.2.9",
"@angular/compiler": "^5.2.9",
"@angular/core": "^5.2.9",
...

Tks!
Jorge

I would like to know if it's possible to implement a feature where I can set the spinner text dynamically, for example:

component.html

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple">
 <p style="font-size: 20px; color: white">{{ text }}</p>
</ngx-spinner>

component.ts

this.spinner.show({ text: "Loading Profile Info..." })

I am trying to use it in my Angular 6.1.3 project..but it is not showing with no errors.

Can you move the opacity setting to another element? The way the template is structured currently prevents the ability to fully override the default styling. The parent container forces inheritance of the opacity, and there isn't a way to change that with CSS alone.

I was planning on using the spinner inside a div and when I add it to my component it goes on full screen. I wounder if its possible to give an option to be full screen or not, and if you select not the spinner would display inside your div.

Ngx-spinner Version 7.0.0
Angular version: 7.2.2

Code in component template:

<div *ngIf="!formActive">{{jsonFormStatusMessage}}
<ngx-spinner
    bdOpacity = 0.9
    bdColor = "#333"
    size = "default"
    color = "#fff"
    type = "ball-pulse"
    fullScreen = "false"
    >
    <p style="color: white" > Loading... </p>
</ngx-spinner>
</div>

Expected behavior: spinner covering only the div containing my component.

Effective behavior: spinner covers the whole root module.

In angular 6 with rxjs 6 fix.

Hi,

I am showing the spinner. Processing HTTP requests and then hiding spinner. I show alert box after hidding the spinner but alert box show up before hidding the spinner.

Template code

<ngx-spinner
bdColor = "rgba(51,51,51,0.8)"
size = "default"
color = "#e6513d"
type = "timer"
></ngx-spinner>

Component code:

placeOrder() {
    const currentDate = this._datePipe.transform(new Date(), 'dd-MMM-yyy');

    let addressId;
    const addAddressBody = {
      Address: this.address.value,
      UserId: this._user.id,
      Type: 'Home'                    // TODO : Remove hardcoded value
    };
    this._checkoutService.addAddress(addAddressBody)
      .subscribe(response => {

        // Starting spinner
        this._spinner.show();

        addressId = response;

        const placeOrderApiBody = {
          USERID : this._user.id,
          SUBTOTAL: this._subTotalAmount,
          DELIVERYCHARGE: this.DELIVERY_CHARGE,
          TAX: this._municipalityTax,
          GRANDTOTAL: this._grossTotalAmount,
          ADDRESS: addressId,
          INSTRUCTIONS: this.chefInstruction.value,
          VENDORID: this._user.cart.restaurantId,
          DRIVERINSTRUCTION: this.driverInstruction.value,
          DELIVERYDATE: currentDate,
          DELIVERYTIME: 'As Soon As Possible',
          MOBILENO: this.phoneNumber.value,
          LATITUDE: this._user.address.lat,
          LONGITUDE: this._user.address.lng
        };

        this._checkoutService.placeOrder(placeOrderApiBody).subscribe(
          placeOrderResponseJson => {
            // Get order id
            const orderId = placeOrderResponseJson[0].ORDERID;

            // Send order details to server.
            const items = this._user.cart.cartItems;

            let index = 0;
            for (index = 0; index < items.length; index++) {

              const placeOrderDetailApiBody = {
                ORDERID: orderId,
                PRODUCTID: items[index].productId,
                QUANTITY: items[index].quantity,
                PRICE: items[index].unitPrice,
              };

              this._checkoutService.sendOrderDetails(placeOrderDetailApiBody)
                .subscribe( sendOrderDetailsResponseJson => {
                });
            }

            // Hidding spinner.
            this._spinner.hide();

            // Emptying cart for next order to avoid duplicates.
            this._user.cart = new Cart();

            // TODO : Show modal insted of alert.
            alert('Order successful!');

            this._router.navigate(['/location']);
          }
        );
      });
  }

Hi, I must be missing out on something for this issue to be caused.
Using Angular 4

I get the following Error in Console when I import your NgxSpinnerModule from ngx-spinner in app.module

(index):17 Error: (SystemJS) Unexpected token <
	SyntaxError: Unexpected token <
	    at eval (<anonymous>)
	    at Object.eval (http://localhost:57028/app/app.module.js:21:21)
	    at eval (http://localhost:57028/app/app.module.js:38:4)
	    at eval (http://localhost:57028/app/app.module.js:39:3)
	Evaluating http://localhost:57028/ngx-spinner
	Evaluating http://localhost:57028/app/app.module.js
	Evaluating http://localhost:57028/app/main.js
	Error loading http://localhost:57028/app/main.js
	    at eval (<anonymous>)
	    at Object.eval (http://localhost:57028/app/app.module.js:21:21)
	    at eval (http://localhost:57028/app/app.module.js:38:4)
	    at eval (http://localhost:57028/app/app.module.js:39:3)
	Evaluating http://localhost:57028/ngx-spinner
	Evaluating http://localhost:57028/app/app.module.js
	Evaluating http://localhost:57028/app/main.js
	Error loading http://localhost:57028/app/main.js

This is my app.module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { HomeComponent } from './components/home.component';
import { UserService } from './Service/user.service';
import { UserComponent } from './Components/user.component';
import { SearchComponent } from './Components/search.component';
import { FormsModule } from '@angular/forms';
import { NgxSpinnerModule } from 'ngx-spinner';


@NgModule({
    imports: [BrowserModule, ReactiveFormsModule, FormsModule, HttpModule, NgxSpinnerModule, routing],
    declarations: [AppComponent, UserComponent, HomeComponent, SearchComponent],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

This is my package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.3.4",
    "@angular/compiler": "~4.3.4",
    "@angular/core": "~4.3.4",
    "@angular/forms": "~4.3.4",
    "@angular/http": "~4.3.4",
    "@angular/platform-browser": "~4.3.4",
    "@angular/platform-browser-dynamic": "~4.3.4",
    "@angular/router": "~4.3.4",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4",
    "ngx-spinner": "1.2.0"
  },
  "devDependencies": {
    "@angular/cli": "^6.1.5",
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.1.0"
  },
  "repository": {}
}

And systemjs.config.js
I think the problem might lie in this file. Is there any declaration missing in systemjs.congfig.js ?

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: '/app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
            'ng2-bs3-modal': 'npm:/ng2-bs3-modal'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: 'main.js', defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
            ,
            'ng2-bs3-modal':
            { main: '/bundles/ng2-bs3-modal.js', defaultExtension: 'js' }
        }
    });
})(this);

and tsconfig.json if that is of any use

{
  "compilerOptions": {
    "noStrictGenericChecks": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

I have not yet called the tag in the HTML, as the error fires from app.module.ts.
Any help will be very much appreciated, I looked over the web for similar issues but to no avail.
Thanks !

I have a page with a scroll-bar , so loader type is right at the bottom of the screen , how can i make it center aligned ?
I'm using spinner with angular 6.

In my current project I determined the size of the libraries used in the delivery package. (Build with angular cli 6.0.x -> ng build --prod)

I realized that ngx-spinner has a size of 454.6 KB (ngx-spinner.ngfactory.js.pre-build-optimizer.js: 240.63 KB, ngx-spinner.umd.js_ 212.62 KB)

This seems really big.
So my question: is this stuff really needed for delivering?

How to use multiple ngx-spinner object on single page. how can i show/hide each one of the using view child

Is it possible now, or in a future update, to have the ability to show/hide the spinner based on an expression evaluation instead of having to use the service?

Something like

pendingLoads: number = 0;
<ngx-spinner [show]="pendingLoads > 0">

So if it evals to true, then show otherwise hide.

Thanks
-Ray

Currently the spinner is disabled by default.
You have to call .show() action to show it.
But, in some cases, the service injection is too long and i want to show the spinner during this loading time.

Add an optional attribute to set the default visibility (at false by default).

Exemple

<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#fff" type="square-loader" loadingText="Loading app..." isVisibleByDefault="true"></ngx-spinner> ```

hello !
I can customize image of spinner ?

Thanks !

I installed the dependency and added NgxSpinnerModule to AppModule as decsribed in the guide but when I launch my application using npm start I get following error

how to increase size of loadingText??

Hi,

Is it possible to use this as a loader for a specific section of my page (e.g table loading) and not the entire page which blocks?

Thanks

Hi there,
I don't know how to use it with interceptor.
Spinner never appears.

app.module.ts

import { NgxSpinnerModule } from 'ngx-spinner';

imports: [
    ...
    NgxSpinnerModule,
    ...
]

interceptor.ts

import { NgxSpinnerService } from 'ngx-spinner';
export class LoadingInterceptor implements HttpInterceptor {
constructor(private spinner: NgxSpinnerService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        /** spinner starts on init */
        this.spinner.show();
        return next.handle(req).do((event: HttpEvent<any>) => {
            /** spinner ends */
            this.spinner.hide();
        }, (err: any) => {
            /** spinner ends */
            this.spinner.hide();
        });        
    }

app.html:

<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
<ngx-spinner></ngx-spinner>

Please, add support for Angular 7.

A message will be a nice optional parameter to display below the spinner. e.g. Loding...

Did you think to implement a parameter to add custom icon or image ?

Hi!

I want to use the spinner (ngx-spinner v6.1.2 - see) on a custom style on the first loading (loading my app first time). After this, I want use the same spinner on a different style (app is loaded, but I'm loading some data while I use the app).

Someone did it before? Some tip about the best way to do this?

I'm using Angular 6 on asp.net core.

--
Stackoverflow question: https://stackoverflow.com/q/52079478/3783143

Hello Napster2210,

could you provide a way to change the spinner options from the ngx-spinner.service.ts , i use one element in app.componant.ts .
i show and hide it from any page , but the problem that i need to change some options from other pages.

Need a new feature to ignore loading bar in some request, where response time is too less.

Real case scenario : we make lookup service call to backed for drop downs, so when we edit a letter it again call the service an at times, response is quite fast this creates flashy screen and user experience is not ver good

Can we make the size of loadingText customizable, so that any one can increase/decrease the text size?

Hi,

When will be this feature available? Is there any specific time frame.

Thanks.

I have a problem with spinner I have downloaded the package and implemented as shown below. But I get an error any help please.

Thanks.

In Module
import { NgxSpinnerModule } from 'ngx-spinner';

// ........

@NgModule({
// ...
  imports: [
  NgxSpinnerModule
]
})

In Component
import { NgxSpinnerService } from 'ngx-spinner';

package.json

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/platform-server": "^5.2.0",
"@angular/router": "^5.2.0",
"@toverux/ngx-sweetalert2": "^4.0.0",
"angular-imask": "1.0.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"imask": "^4.0.0",
"jquery": "3.1.1",
"ngx-currency": "^1.5.0",
"ngx-spinner": "^6.1.2",
"perfect-scrollbar": "^1.4.0",
"rimraf": "^2.6.2",
"rxjs": "^5.5.11",
"rxjs-es": "^5.0.0-beta.12",
"rxjs-system-bundle": "^5.1.1-2",
"sweetalert2": "^7.26.23",
"systemjs": "^0.20.9",
"tiny-date-picker": "^3.2.6",
"tippy.js": "^3.0.4",
"zone.js": "^0.7.7"
},

Hi ,

How can I add gif instead of load awesome spinner.

Very well and affordable did. But it would be even better if you added animation and text editing, and thank you very much!

Is it possible to expose the z-index css property for configuration in ngx-spinner ?

Just wondering if ngx-spinner is suport on angular 7 or not

how to customize loading text as using multiple lines with different classes and tags of HTML and using icons
example:
loadingText:"loading"
I want to write multiple lines with different classes and tags of HTML as:
< h1 >loading ...< h1 >
< span > please wait < br/ > .......</ span >

I did not find a way to use the ngx-spinner for indeterminate time. API response time, in development env, is unpredicatable and I need a way for the spinner to stop immediately after receiving the response. Please suggest.

Hello,

The ngx-spinner latest version should work on Angular 5.2.6 ?
i found warn
WARNING in ./node_modules/ngx-spinner/fesm5/ngx-spinner.js
69:59-75 "export 'defineInjectable' was not found in '@angular/core'

Tks!
HENRY

NgxSpinnerComponent.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.
at viewDebugError (core.js:7386)
at expressionChangedAfterItHasBeenCheckedError (core.js:7374)
at checkBindingNoChanges (core.js:7476)
at checkNoChangesNodeInline (core.js:10337)
at checkNoChangesNode (core.js:10326)
at debugCheckNoChangesNode (core.js:10929)
at debugCheckDirectivesFn (core.js:10857)
at Object.eval [as updateDirectives] (NgxSpinnerComponent.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10846)
at checkNoChangesView (core.js:10225)

At:

My Use:

public subjectLoading = new Subject();

this.subjectLoading.subscribe((p) => {
if (p === true) {
this.spinner.show();
} else {
this.spinner.hide();
}
})

ngx-spinner is a custom element, so in this case, if you add <ngx-spinner> in your HTML file then you have to add CUSTOM_ELEMENTS_SCHEMA to your app module.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// ........

@NgModule({
// ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]
})

it is working fine when i call show() method on root module i.e. app-module .
( tag is define inside the app-root-component.html)

But in case of calling of from the feature module it is not showing the spinner .

Hi,

I am using Angular 4 and i am getting the following error:
node_modules/ngx-spinner/ngx-spinner.d.ts, found version 4, expected 3, resolving symbol AppModule

I downgraded to all versions but I still get the same error.

Thanks

npm i ngx-spinner
npm ERR! Unexpected token < in JSON at position 14274

Here are the logs:
verbose stack SyntaxError: Unexpected token < in JSON at position 14274
13 verbose stack at JSON.parse ()
13 verbose stack at module.exports (C:\Program Files\nodejs\node_modules\npm\lib\utils\parse-json.js:3:15)
13 verbose stack at BB.join (C:\Program Files\nodejs\node_modules\npm\lib\install\read-shrinkwrap.js:31:20)
13 verbose stack at tryCatcher (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
13 verbose stack at Holder$3._callFunction (eval at generateHolderClass (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:92:16), :14:44)
13 verbose stack at Holder$3.checkFulfillment (eval at generateHolderClass (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:92:16), :29:30)
13 verbose stack at Promise.eval (eval at thenCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\join.js:14:16), :6:20)
13 verbose stack at Promise._settlePromise (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:566:21)
13 verbose stack at Promise._settlePromise0 (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
13 verbose stack at Promise._settlePromises (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
13 verbose stack at Promise._fulfill (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:638:18)
13 verbose stack at Promise._settlePromise (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:582:21)
13 verbose stack at Promise._settlePromise0 (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
13 verbose stack at Promise._settlePromises (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
13 verbose stack at Promise._fulfill (C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\promise.js:638:18)
13 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\bluebird\js\release\nodeback.js:42:21
14 verbose cwd C:\Users\Z003U7UJ\git\galaxy4.0\galaxyApp
15 verbose Windows_NT 6.1.7601
16 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "i" "[email protected]"
17 verbose node v8.9.4
18 verbose npm v5.6.0
19 error Unexpected token < in JSON at position 14274
20 verbose exit [ 1, true ]

Hi, I would like to put the spinner in a button, or in a custom position (for example inside a div, ecc). I've tried putting the inside my button, but it's still displaying on the center of the page, even with the fullScreen="false". How can I achieve this?

It'd be great if there were a way to set the ngx-spinner to only cover a table that's loading for instance, rather than the whole page. If there isn't a way to do this now, could this please be added in the future?Thanks,

David

hi,

i am trying to use the spinner service in my app. now what i have seen is that loader is full screen at first view but as the view scrolls down the spinner is stuck above it does not remains fix at on place.

the thing i say was the black-overlay class where position is set zero but as i make is fixed from chrome console it remains there as i scroll down.

can you help me out with this? how can i override your class position?

If the spinner is shown when at a bottom of a page then we only see part of it. It appears like the overlay will only cover the surface of the initial screen position. See https://stackblitz.com/edit/angular-9e6nmr