Repository files navigation

A library with more than 50 different loading spinners for Angular 4 - 19. (https://napster2210.github.io/ngx-spinner/)

• Angular 19 support 🥳🥳🥳🥳

Use appropriate version based on your Angular version.

• What's New
• Table of contents
• Browser Support
• Features
• Demo
  • StackBlitz Demo
• Installation
• Usage
• Methods
• Available Options
  • Using Spinner Type
  • Using Custom Spinner
  • NOTE
  • How to use type?
• Useful Tips
• Versioning
• Creator
  • Yuvraj Chauhan
• Future Plan
• Ask Me
• Credits
  • License

Chrome	Firefox	IE / Edge	Safari	Opera
Latest ✔	Latest ✔	IE11, Edge ✔	Latest ✔	Latest ✔

• Angular 18 Support
• Custom spinner image support(gif), you can passimg tag
• Multiple Spinners
• Configurable option through service
• Fullscreen Mode(Enable/Disable)
• show()/hide() methods return promise
• Dynamicz-index
• Smooth animation whilehide/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

• Normal Usage

• Inside Container

• Multiple Spinner

• Change Options Through Service

ngx-spinner is available vianpm andyarn

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  ]}

ImportNgxSpinnerModule in in the root module(AppModule):

import{NgModule,CUSTOM_ELEMENTS_SCHEMA}from"@angular/core";import{BrowserAnimationsModule}from"@angular/platform-browser/animations";// Import library moduleimport{NgxSpinnerModule}from"ngx-spinner";@NgModule({imports:[// ...BrowserAnimationsModule,NgxSpinnerModule,],schemas:[CUSTOM_ELEMENTS_SCHEMA],})exportclassAppModule{}

• There is possibility to use global configuration for NgxSpinnerModule.
• Just callforRoot method for NgxSpinnerModule and pass configuration object.
• The input properties of NgxSpinnerComponent has higher priority than global options

// Available optionsinterfaceNgxSpinnerConfig{type?:string;}// Use in app@NgModule({imports:[NgxSpinnerModule.forRoot({type:'ball-scale-multiple'})]})

AddNgxSpinnerService service wherever you want to use thengx-spinner.

import{NgxSpinnerService}from"ngx-spinner";classAppComponentimplementsOnInit{constructor(privatespinner:NgxSpinnerService){}ngOnInit(){/** spinner starts on init */this.spinner.show();setTimeout(()=>{/** spinner ends after 5 seconds */this.spinner.hide();},5000);}}

Now use in your template

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

SeeDemo

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

• [bdColor]: RGBA color format.To set background-color for backdrop, defaultrgba(51,51,51,0.8) wherealpha value(0.8) is opacity of backdrop
• [size]: Anyone fromsmall,default,medium,large.To set size of spinner, defaultlarge
• [color]: Any css color format.To set color of spinner, default#fff
• [type]: Choose any animation spinner fromLoad Awesome.To set type of spinner
• [fullScreen]:true orfalseTo enable/disable fullscreen mode(overlay), defaulttrue
• [name]: For multiple spinnersTo set name for spinner, defaultprimary
• [zIndex]: For dynamic z-indexTo set z-index for the spinner, default99999
• [template]: For custom spinner imageTo set custom template for the custom spinner, defaultnull
• [showSpinner]:true orfalseTo show/hide spinner from template using variable
• [disableAnimation]:true orfalseTo enable/disable fade animation of spinner, defaultfalse

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

<ngx-spinnerbdColor="rgba(0, 0, 0, 1)"template="<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"></ngx-spinner>

• You can passHTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.
• If you want multiplengx-spinner instance, just addname attribute withngx-spinner component. But in this case, you've to pass that particular name of a spinner inshow/hide method. CheckDemo
• You can also change the options/configuration of spinner through service now.
• For smaller bundle size, add specific css file under "styles" array inangular.json file

this.spinner.show("mySpinner",{type:"line-scale-party",size:"large",bdColor:"rgba(0, 0, 0, 1)",color:"white",template:"<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />",});

• Go to theLoad 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 thentype will beball-8bits.
  • For more information you can check it outDemo
  • For smaller bundle size you need to add css forball-8bits animation(e.g.ball-8bits.css)

• Make sure you've addedCUSTOM_ELEMENTS_SCHEMA as your schema in your main module.
• If you use multipleshow() methods in a single component or single function one after another then wrap theshow() method withinsetTimeout() 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 haveposition: 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:

<major>.<minor>.<patch>

For more information on SemVer, please visithttp://semver.org.

• @GitHub

• Interceptor Implementation

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

Inspired byLoad Awesome by Daniel Cardoso.

ThanksAlex Vieira Alencar for helping me with Multiple Spinner Support.

Thanksennjin for reducing the bundle size.

ngx-spinner isMIT licensed.