0

I have a problem on putting "ngx-spinner" on my angular application.

I imported modules on app.module.ts :

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { NgxSpinnerModule } from 'ngx-spinner';
    
    ...
    
    imports: [
        BrowserModule,
        NgxSpinnerModule,
        BrowserAnimationsModule,
      ],
      providers: [],
      bootstrap: [AppComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

On my component.ts i imported NgxSpinnerService like this :

...
import { NgxSpinnerService } from 'ngx-spinner';
...
export class MyComponent {
  constructor(
    private spinner: NgxSpinnerService
  ) {}
...
  onAppReady($event: L.Map) {
    this.spinner.show();
  }
...

In my component.html i put my ngx-spinner like this :

  <ngx-spinner
  bdColor = "rgba(51, 51, 51, 0.8)"
  size = "large"
  color = "#934d4d"
  [fullScreen]="true"
  type = "ball-8bits">
  LOADING ...
</ngx-spinner>

When i open my app , the page is dark and i can see the "LOADING..." text, but the icon doesn't appear at the center.

Someone can help me plase ?

mardev
  • 5
  • 3

0 Answers0