ngx-spinner not showing after update to 13.1.1

[aleperfetti81]

ngx-spinner not showing after update to 13.1.1 If i install v. 13.0.0 all is working correctly.

Can you please check why.

app.component.html

<ngx-spinner bdColor="rgba(255,252,252,0.45)" size="medium" color="#e42f86" type="ball-scale-ripple-multiple">
    <p></p>
</ngx-spinner>

I use this code to show it:

this._ngxSpinnerService.show();

ng--version info:

Angular CLI: 13.2.3 Node: 16.13.0 Package Manager: npm 8.1.0 OS: win32 x64

Angular: 13.2.2 ... animations, cdk, common, compiler, compiler-cli, core, forms ... language-service, material, material-moment-adapter ... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1302.3 @angular-devkit/build-angular 13.2.3 @angular-devkit/core 13.2.3 @angular-devkit/schematics 13.2.3 @angular/cli 13.2.3 @schematics/angular 13.2.3 rxjs 7.5.4 typescript 4.5.5

[Napster2210]

@aleperfetti81 I'll look into it.

[MickeWest]

Hi - I can confer that all my code worked until I updated to the latest version of 13.1.1. Going back to 13.0.0 all code bases started to work again. The actual spinner background and any text shows up as normal and looks correct but the animation of the spinner does not work and does not show up at all.

Thanks,

Michael

[ennjin]

but the animation of the spinner does not work and does not show up at all.

Hi. Do you use new css animation chunks? I assume you don't provide the css animation file to angular.json config. Please, take a look at the docs.

In your case you need add the follow code to the angular.json config:

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-scale-ripple-multiple.css"
  ]
}

[Napster2210]

Thank you @ennjin for the answer. Yes, @aleperfetti81 @MickeWest with the latest version we're reducing the bundle size of the library so you need to do one additional step to add respective css file like below in your angular.json file:

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-scale-multiple.css" // ===> Add css file based on your animation name(here it's "ball-scale-multiple")
    // You're able to add multiple files if you need
  ]
}

[otoman]

After adding style works fine. Thank you :)

[aleperfetti81]

Thanks @Napster2210, now it works. ;)

[MickeWest]

Hi, I see that comment in there now. Was it there from the beginning? If so, I must somehow have missed it. I am all for making bundles smaller but this makes it a more static in the usage of the various objects we can use, or more correctly we would need to leave comments in all code using a spinner to ensure each developer knows to do this if they change the spinner at some point.

[Napster2210]

@MickeWest It was there in README since the release of 13.1.1