ngx-spinner icon not showing Angular 13

Question

The spinner comes up on page load however the loading text is showing but the icon is not showing. I have followed the documentation but I can't seem to find the issue. This is a screenshot of what I see on the page

package.json

"ngx-spinner": "^13.1.1",

angular.json

    "styles": [
      "node_modules/ngx-spinner/animations/ball-scale-multiple.css",
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/css/reset.css",
      "src/css/styles.scss"
    ],

app.module.ts

   import { NgxSpinnerModule } from "ngx-spinner";
     import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
          
   imports: [
      NgxSpinnerModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

app.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">Loading...</p>
</ngx-spinner>

app.component.ts

 import { NgxSpinnerService } from 'ngx-spinner';

 constructor(private spinner: NgxSpinnerService){}

  ngOnInit(): void {

    /** spinner starts on init */
    this.spinner.show();

    setTimeout(() => {
      /** spinner ends after 5 seconds */
      this.spinner.hide();
    }, 5000);

  }

Can you inspect element and check if how many instances of "" element you have on DOM? — Phalgun, Aug 17 '22 at 20:08
Seems to work: https://stackblitz.com/edit/angular-13-sutyej?file=src/app/app.module.ts — skink, Aug 17 '22 at 20:24
@A.Mac Is the above code the complete example? If not, can you reproduce the issue on stackblitz or github? Without complete example it is difficult to help. Probably for debugging, you can add a console.log() statement above `this.spinner.hide()` to see if you even get to that point. Also, do you have any errors in you console tab? It might give a clue. — Phalgun, Aug 17 '22 at 22:05
Try to add [fullScreen] = "true" to ngx-spinner tag and check. — Exception, Aug 18 '22 at 04:49

Exception · Accepted Answer · 2022-08-19T16:49:54.707

1

app.componet.html

Added [fullScreen] = "true" to ngx-spinner tag

<ngx-spinner
  bdColor="rgba(51,51,51,0.8)"
  size="medium"
  color="#fff"
  type="ball-scale-multiple"
  [fullScreen] = "true"
>
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>

edited Aug 19 '22 at 16:49

answered Aug 19 '22 at 16:43

Exception

571
1
3
15

score 1 · Answer 2 · edited Nov 13 '22 at 08:41

1

I had a same issue. you have to recompile the project (ng serve) after your added the type="ball-scale-multiple"

then you can showing correctly

this also keep in mind

edited Nov 13 '22 at 08:41

sm3sher

2,764
1
11
23

answered Nov 04 '22 at 07:18

IRESHAN MADURANGA

11
2

Mohnish Raval · Answer 3 · 2023-06-08T16:24:50.113

1

I also faced the same issue(I am using Angular 13 version).

Go to styles.scss file and add the following: @import '~ngx-spinner/animations/ball-pulse-sync.css';(i was using ball-pulse- sync.css style) Add your style accordingly
Remove if you have added any styles in angular.json inside styles[] array as it is not needed. Lastly, I assume you have already added the necessary imports in app.module.ts.

edited Jun 08 '23 at 16:24

answered Jun 08 '23 at 16:24

Mohnish Raval

11
4

Konstantinos · Answer 4 · 2022-10-19T09:18:03.650

0

For the ngx-spinner you also need to add to your imports array in app.module.ts the BrowserAnimationsModule.

From

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

edited Oct 19 '22 at 09:18

answered Oct 17 '22 at 09:03

Konstantinos

109
1
6

score 0 · Answer 5 · answered Apr 18 '23 at 16:43

Make sure you check that you are adding the animation css (in my case "./node_modules/ngx-spinner/animations/ball-scale-ripple-multiple.css") to the correct "styles" array in angular.json -> It needs to be part of the "build" styles

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "rumen-plamenov-website": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/rumen-plamenov-website",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-spinner/animations/ball-scale-ripple-multiple.css"
            ],

ngx-spinner icon not showing Angular 13

5 Answers5

app.componet.html