CODEWITHSUNDEEP
jsonangulartypescriptngx-spinner
A.Mac
A.Mac

Reputation: 263

ngx-spinner icon not showing Angular 13

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 enter image description here enter image description here

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);

  }

Upvotes: 3

Views: 7234

Answers (6)

Imam Hossain Roni
Imam Hossain Roni

Reputation: 1056

If the animation is not working then please import the below line in app.module.ts & use it in imports: [...]

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

Then use the below lines in your app.component.ts

 <ngx-spinner bdColor = "rgba(49,59,13,0.75)" size = "large" color = "#fff" type = "square-jelly-box" [fullScreen] = "true"><p style="color: white" > Digesting right now, I'm almost ready... </p></ngx-spinner>

and Please don't forget to add the necessary CSS file in angular.json:

     "styles": [  ...
                  "node_modules/ngx-spinner/animations/square-jelly-box.css"
                ],

I hope this might help you :)

Upvotes: 0

Mohnish Raval
Mohnish Raval

Reputation: 11

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

  1. 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
  2. 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.

Upvotes: 1

Kostadin Krushkov
Kostadin Krushkov

Reputation: 66

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"
            ],

Upvotes: 2

IRESHAN MADURANGA
IRESHAN MADURANGA

Reputation: 11

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

enter image description here

Upvotes: 1

Konstantinos
Konstantinos

Reputation: 119

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';

Upvotes: 0

Exception
Exception

Reputation: 592

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>

Upvotes: 1

Related Questions