What is ngx-spinner?
ngx-spinner is an Angular library that provides a variety of customizable loading spinners to indicate the loading state of a web application. It is easy to integrate and offers a wide range of spinner types and configurations.
What are ngx-spinner's main functionalities?
Basic Spinner
This feature allows you to add a basic spinner to your Angular application. You can customize the background color, size, color, and type of the spinner.
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>
Conditional Spinner
This feature allows you to display the spinner conditionally based on a boolean variable. In this example, the spinner will be shown only when `isLoading` is true.
<ngx-spinner *ngIf="isLoading" bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>
Custom Template
This feature allows you to use a custom template for the spinner. You can place any HTML content inside the ngx-spinner tag to create a custom loading indicator.
<ngx-spinner><div class="custom-spinner-template">Loading...</div></ngx-spinner>
Spinner Service
This feature provides a service to control the spinner programmatically. You can use the `show` and `hide` methods of the `NgxSpinnerService` to display or hide the spinner.
import { NgxSpinnerService } from 'ngx-spinner';
constructor(private spinner: NgxSpinnerService) {}
showSpinner() {
this.spinner.show();
}
hideSpinner() {
this.spinner.hide();
}
Other packages similar to ngx-spinner
ngx-loading
ngx-loading is another Angular library for displaying loading indicators. It offers similar functionalities to ngx-spinner but with a different set of customization options and spinner types.
angular-loading-bar
angular-loading-bar is a package that provides a loading bar at the top of the page instead of a spinner. It is useful for indicating the loading state of HTTP requests and offers a different visual approach compared to ngx-spinner.
ng2-loading-spinner
ng2-loading-spinner is a lightweight Angular library for adding loading spinners. It offers basic spinner functionalities and is simpler compared to ngx-spinner, making it suitable for projects with minimal loading indicator requirements.
NgxSpinner
A library for loading spinner specifically for Angular 4/5/6/7/8. (https://napster2210.github.io/ngx-spinner/)
What's New
- Latest update for Angular 8 🎉🎉🥳🥳
- Multiple Spinner Support 🎉🎉🥳🥳
- Configurable option through service 🎉🎉🥳🥳
- Fullscreen Mode(Enable/Disable)
show()/hide()
methods return promise
Use appropriate version based on your Angular version.
Angular 4 | Angular 5 | Angular 6/7/8 |
---|
>= v1.2.0 | >= v2.0.0 | >= v8.0.1 |
Table of contents
Browser Support
Chrome | Firefox | IE / Edge | Safari | Opera |
---|
Latest ✔ | Latest ✔ | IE11, Edge ✔ | Latest ✔ | Latest ✔ |
Demo
Working Demo
StackBlitz Demo:
Installation
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
):
import { NgxSpinnerModule } from "ngx-spinner";
@NgModule({
imports: [
NgxSpinnerModule
]
})
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() {
this.spinner.show();
setTimeout(() => {
this.spinner.hide();
}, 5000);
}
}
Now use in your template
<ngx-spinner></ngx-spinner>
See Demo
NgxSpinner Service
NgxSpinnerService.show()
Shows the spinnerNgxSpinnerService.hide()
Hides the spinner
NgxSpinner Component
<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>
- [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
- [name]: For multiple spinners
To set name for spinner, default
primary
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.
this.spinner.show("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
Versioning
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.
Creator
Future Plan
- Dynamic
z-index
- Image support for spinner
- Interceptor Implementation (Coming soon)
Credits
Inspired by Load Awesome by Daniel Cardoso.
Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.
License
ngx-spinner is MIT licensed.