Non-Printable Material

    TypeScript icon, indicating that this package has built-in type declarations

    14.0.0 • Public • Published

    A library with more than 50 different loading spinners for Angular 4 - 14. (


    Support Support Support Support Support Support Support Support Support Support Support License Gitter

    What's New

    • Angular 14 support 🥳🥳🥳🥳
    • Bug Fixes/Improvements

    Use appropriate version based on your Angular version.

    Angular 14 Angular 13 Angular 12 Angular 11 Angular 10
    >=v14.0.0 >=v13.1.1 >=v12.0.0 >=v11.0.2 >=v10.0.1
    Angular 9 Angular 8 Angular 6/7 Angular 5 Angular 4
    >=v9.0.1 v8.1.0 v7.2.0 >=v1.2.0 >=v2.0.0

    Table of contents

    Browser Support

    ChromeChrome FirefoxFirefox IE / EdgeIE / Edge iOS SafariSafari OperaOpera
    Latest Latest IE11, Edge Latest Latest


    • Angular 14 Support
    • Custom spinner image support(gif), you can pass img tag
    • Multiple Spinners
    • Configurable option through service
    • Fullscreen Mode(Enable/Disable)
    • show()/hide() methods return promise
    • Dynamic z-index
    • Smooth animation while hide/show the spinner
    • New updated DEMO website
    • Option to disable fade animation
    • Show/Hide spinner from template using @Input() variable
    • Smaller bundle size


    Working Demo

    StackBlitz Demo


    ngx-spinner is available via npm and yarn

    Using npm:

    $ npm install ngx-spinner --save

    Using yarn:

    $ yarn add ngx-spinner

    Using angular-cli:

    $ ng add ngx-spinner


    Add css animation files to angular.json config

      "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

    Import NgxSpinnerModule in in the root module(AppModule):

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
    import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
    // Import library module
    import { NgxSpinnerModule } from "ngx-spinner";
      imports: [
        // ...
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    export class AppModule {}


    • There is possibility to use global configuration for NgxSpinnerModule.
    • Just call forRoot method for NgxSpinnerModule and pass configuration object.
    • The input properties of NgxSpinnerComponent has higher priority than global options
    // Available options
    interface NgxSpinnerConfig {
      type?: string;
    // Use in app
      imports: [
        NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' })

    Add NgxSpinnerService service wherever you want to use the ngx-spinner.

    import { NgxSpinnerService } from "ngx-spinner";
    class AppComponent implements OnInit {
      constructor(private spinner: NgxSpinnerService) {}
      ngOnInit() {
        /** spinner starts on init */;
        setTimeout(() => {
          /** spinner ends after 5 seconds */
        }, 5000);

    Now use in your template

    <ngx-spinner type="ball-scale-multiple"></ngx-spinner>

    See Demo


    • Shows the spinner
    • NgxSpinnerService.hide() Hides the spinner

    Available Options

    • [bdColor]: RGBA color format. To set background-color for backdrop, default rgba(51,51,51,0.8) where alpha value(0.8) is opacity of backdrop
    • [size]: Anyone from small, default, medium, large. To set size of spinner, default large
    • [color]: Any css color format. To set color of spinner, default #fff
    • [type]: Choose any animation spinner from Load Awesome. To set type of spinner
    • [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true
    • [name]: For multiple spinners To set name for spinner, default primary
    • [zIndex]: For dynamic z-index To set z-index for the spinner, default 99999
    • [template]: For custom spinner image To set custom template for the custom spinner, default null
    • [showSpinner]: true or false To show/hide spinner from template using variable
    • [disableAnimation]: true or false To enable/disable fade animation of spinner, default false

    Using Spinner Type

      <p style="font-size: 20px; color: white">Loading...</p>

    Using Custom Spinner

      bdColor="rgba(0, 0, 0, 1)"
      template="<img src='' />"


    • You can pass HTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.
    • If you want multiple ngx-spinner instance, just add name attribute with ngx-spinner component. But in this case, you've to pass that particular name of a spinner in show/hide method. Check Demo
    • You can also change the options/configuration of spinner through service now.
    • For smaller bundle size, add specific css file under "styles" array in angular.json file"mySpinner", {
      type: "line-scale-party",
      size: "large",
      bdColor: "rgba(0, 0, 0, 1)",
      color: "white",
        "<img src='' />",

    How to use type?

    • Go to the Load Awesome.
    • Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.
      • Let's say if I select "Ball 8bits" animation then type will be ball-8bits.
      • For more information you can check it out Demo
      • For smaller bundle size you need to add css for ball-8bits animation(e.g. ball-8bits.css)

    Useful Tips

    • Make sure you've added CUSTOM_ELEMENTS_SCHEMA as your schema in your main module.
    • If you use multiple show() methods in a single component or single function one after another then wrap the show() method within setTimeout() method to avoid any rendering issue.
    • When you want to use spinner inside any container(fullScreen: false), in that case your parent element of spinner must have position: relative; style property.
    • You can't set custom template through service options, it's a limitation by Angular itself.


    ngx-spinner will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:


    For more information on SemVer, please visit


    Yuvraj Chauhan

    Future Plan

    • Interceptor Implementation

    Ask Me

    • Now you can directly send me a message on Gitter for any query/suggestion/updates


    Inspired by Load Awesome by Daniel Cardoso.

    Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.

    Thanks ennjin for reducing the bundle size.


    ngx-spinner is MIT licensed.


    npm i ngx-spinner

    DownloadsWeekly Downloads






    Unpacked Size

    443 kB

    Total Files


    Last publish


    • geek2210