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.
| Angular 19 | Angular 18 | Angular 17 | Angular 16 | Angular 15 |
|---|---|---|---|---|
>=v19.0.0 |
>=v18.0.0 |
>=v17.0.0 |
>=v16.0.2 |
>=v15.0.1 |
| 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 |
- What's New
- Table of contents
- Browser Support
- Features
- Demo
- Installation
- Usage
- Methods
- Available Options
- Useful Tips
- Versioning
- Creator
- Future Plan
- Ask Me
- Credits
 Chrome |
 Firefox |
 IE / Edge |
 Safari |
 Opera |
|---|---|---|---|---|
| Latest âś” | Latest âś” | IE11, Edge âś” | Latest âś” | Latest âś” |
- Angular 18 Support
- Custom spinner image support(gif), you can pass
imgtag - Multiple Spinners
- Configurable option through service
- Fullscreen Mode(Enable/Disable)
show()/hide()methods return promise- Dynamic
z-index - Smooth animation while
hide/showthe spinner - New updated DEMO website
- Option to disable fade animation
- Show/Hide spinner from template using @Input() variable
- Smaller bundle size
ngx-spinner is available via npm and yarn
Using npm:
$ npm install ngx-spinner --saveUsing yarn:
$ yarn add ngx-spinnerUsing angular-cli:
$ ng add ngx-spinnerAdd css animation files to angular.json config
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";
@NgModule({
imports: [
// ...
BrowserAnimationsModule,
NgxSpinnerModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}- There is possibility to use global configuration for NgxSpinnerModule.
- Just call
forRootmethod 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
@NgModule({
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 */
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 5000);
}
}Now use in your template
<ngx-spinner type="ball-scale-multiple"></ngx-spinner>See Demo
NgxSpinnerService.show()Shows the spinnerNgxSpinnerService.hide()Hides the spinner
- [bdColor]: RGBA color format.
To set background-color for backdrop, default
rgba(51,51,51,0.8)wherealphavalue(0.8) is opacity of backdrop - [size]: Anyone from
small,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 from Load Awesome. To set type of spinner
- [fullScreen]:
trueorfalseTo enable/disable fullscreen mode(overlay), defaulttrue - [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]:
trueorfalseTo show/hide spinner from template using variable - [disableAnimation]:
trueorfalseTo enable/disable fade animation of spinner, defaultfalse
<ngx-spinner
bdColor="rgba(51,51,51,0.8)"
size="medium"
color="#fff"
type="ball-scale-multiple"
>
<p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner><ngx-spinner
bdColor="rgba(0, 0, 0, 1)"
template="<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
>
</ngx-spinner>- You can pass
HTMLcode as loading text now, instead of input parameter(loadingText). Check above code for reference. - If you want multiple
ngx-spinnerinstance, just addnameattribute withngx-spinnercomponent. But in this case, you've to pass that particular name of a spinner inshow/hidemethod. 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.jsonfile
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 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
typewill beball-8bits. - For more information you can check it out Demo
- For smaller bundle size you need to add css for
ball-8bitsanimation(e.g.ball-8bits.css)
- Let's say if I select "Ball 8bits" animation then
- Make sure you've added
CUSTOM_ELEMENTS_SCHEMAas your schema in your main module. - If you use multiple
show()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 visit http://semver.org.
- Interceptor Implementation
- 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.
{ "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 ] }