Angular Spinner (ngx-spinner lib)

Why we used this lib

• Angular 10 support
• Custom spinner image support(gif), you can pass img tag
• Smooth animation while hide/show the spinner
• A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9/10
• Fullscreen Mode(Enable/Disable)
• show()/hide() methods return promise
• Dynamic z-index

Different Loading Spinner Click Here

How to use the library

ngx-spinner is available via npm and yarn

Using npm:

$ npm install ngx-spinner — save

Using yarn:

$ yarn add ngx-spinner

Usage:

Import NgxSpinnerModule in in the root module(AppModule):

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

Now use in your template

Available Options

• [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.
• [color]: Any CSS color format. To set the color of the spinner, the default #fff
• [type]: Choose any animation spinner from Load Awesome. To set the type of spinner, the default ball-scale-multiple
• [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true

Using Spinner Type

Using Custom Spinner

Install “dependencies”: { “ngx-spinner”: “⁷.2.0”, }, because the most recent version of Angular ngx-spinner is displaying a time error related to dependencies.

this version fixes the problem

Links

• Stackblitz Working Demo
• GitHub repo
• ngx-spinner lib