Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-spinner with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxSpinner = require("ngx-spinner")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-spinner v7.1.4


A library for loading spinner specifically for Angular 4/5/6/7. (

ng5 Support Support Support License devDependency Status

What's New

  • Multiple Spinner Support 🎉🎉🥳🥳
  • Configurable option through service 🎉🎉🥳🥳
  • Latest update for Angular 7 🎉🎉🥳🥳
  • Fullscreen Mode(Enable/Disable)

Use appropriate version based on your Angular version.

Angular 4Angular 5Angular 6/7
>= v1.2.0>= v2.0.0>= v7.0.0

Table of contents

Browser Support

IE / Edge
IE / Edge
iOS Safari
Latest ✔Latest ✔IE11, Edge ✔Latest ✔Latest ✔


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


Import NgxSpinnerModule in in the root module(AppModule):

// Import library module
import { NgxSpinnerModule } from 'ngx-spinner';

  imports: [
    // ...
export class AppModule { }

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


See Demo

NgxSpinner Service

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

NgxSpinner Component

 <p style="font-size: 20px; color: white">Loading...</p>
  • [bdColor]: RGBA color format. To set background-color for backdrop, default rgba(51,51,51,0.8) where aplha 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, default ball-scale-multiple
  • [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true


  • 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.'mySpinner', {
  type: 'line-scale-party', 
  size: 'large', 
  bdColor: 'rgba(100,149,237, .8)', 
  color: 'white'

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


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 (Coming soon)


Inspired by Load Awesome by Daniel Cardoso.

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


ngx-spinner is MIT licensed.


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free