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

NgxSpinner

![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![Support]()
![License]()

What's New

- Angular 21 support 🥳🥳🥳🥳

Use appropriate version based on your Angular version.

| Angular 21 | Angular 19 | Angular 18 | Angular 17 | Angular 16 |
| ----------- | ----------- | ----------- | ----------- | ----------- |
| >=v21.0.0 | >=v19.0.0 | >=v18.0.0 | >=v17.0.0 | >=v16.0.2 |

| Angular 15 | Angular 14 | Angular 13 | Angular 12 | Angular 11 |
| ----------- | ----------- | ----------- | ----------- | ----------- |
| >=v15.0.1 | >=v14.0.0 | >=v13.1.1 | >=v12.0.0 | >=v11.0.2 |

| Angular 10 | Angular 9 | Angular 8 | Angular 6/7 | Angular 5 | Angular 4 |
| ----------- | ---------- | --------- | ----------- | ---------- | ---------- |
| >=v10.0.1 | >=v9.0.1 | v8.1.0 | v7.2.0 | >=v1.2.0 | >=v2.0.0 |

Table of contents

- 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

Browser Support

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

Features

- Angular 21 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

Demo

Working Demo

$3

- Normal Usage

- Inside Container

- Multiple Spinner

- Change Options Through Service

Installation

ngx-spinner is available via npm and yarn

Using npm:

``bash
$ npm install ngx-spinner --save
`

Using yarn:

`bash
$ yarn add ngx-spinner
`

Using angular-cli:

`bash
$ ng add ngx-spinner
`

Usage

Add css animation files to angular.json config

`jsonc
{
"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):

`typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";

@NgModule({
imports: [
// ...
BrowserAnimationsModule,
NgxSpinnerModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
`

#### NOTE

- 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

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

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

`typescript
import { NgxSpinnerService } from "ngx-spinner";

class AppComponent implements OnInit {
constructor(private spinner: NgxSpinnerService) {}

ngOnInit() {
/* spinner starts on init /
this.spinner.show();

setTimeout(() => {
/* spinner ends after 5 seconds /
this.spinner.hide();
}, 5000);
}
}
`

Now use in your template

`html

`

See Demo

Methods

- NgxSpinnerService.show() 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

`html
bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple"
>


Loading...



`

#### Using Custom Spinner

`html
bdColor="rgba(0, 0, 0, 1)"
template=""
>

`

---

#### NOTE

- 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

`javascript
this.spinner.show("mySpinner", {
type: "line-scale-party",
size: "large",
bdColor: "rgba(0, 0, 0, 1)",
color: "white",
template:
"",
});
`

$3

- 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.

Versioning

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 http://semver.org.

Creator

#### Yuvraj Chauhan

- @GitHub

Future Plan

- Interceptor Implementation

Ask Me

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

Credits

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.

$3

ngx-spinner is MIT licensed.