ngx-spinner
Advanced tools
A library with more than 50 different loading spinners for Angular 4 - 11. (https://napster2210.github.io/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.
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();
}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 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 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.
A library with more than 50 different loading spinners for Angular 4 - 11. (https://napster2210.github.io/ngx-spinner/)
Use appropriate version based on your Angular version.
| Angular 4 | Angular 5 | Angular 6/7 | Angular 8 | Angular 9 | Angular 10 | Angular 11 |
|---|---|---|---|---|---|---|
>= v1.2.0 | >= v2.0.0 | v7.2.0 | v8.1.0 | >=v9.0.1 | >=v10.0.1 | >=v11.0.0 |
 Chrome |  Firefox |  IE / Edge |  Safari |  Opera |
|---|---|---|---|---|
| Latest ✔ | Latest ✔ | IE11, Edge ✔ | Latest ✔ | Latest ✔ |
img tagshow()/hide() methods return promisez-indexhide/show the spinnerngx-spinner is available via npm and yarn
Using npm:
$ npm install ngx-spinner --save
Using yarn:
$ yarn add ngx-spinner
Using angular-cli:
$ ng add ngx-spinner
Import NgxSpinnerModule in in the root module(AppModule):
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";
@NgModule({
imports: [
// ...
NgxSpinnerModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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() {
/** spinner starts on init */
this.spinner.show();
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 5000);
}
}
Now use in your template
<ngx-spinner></ngx-spinner>
See Demo
NgxSpinnerService.show() Shows the spinnerNgxSpinnerService.hide() Hides the spinnerrgba(51,51,51,0.8) where aplha value(0.8) is opacity of backdropsmall, default, medium, large.
To set size of spinner, default large#fffball-scale-multipletrue or false
To enable/disable fullscreen mode(overlay), default trueprimary99999nulltrue or false
To show/hide spinner from template using variabletrue or false
To enable/disable fade animation of spinner, default false<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>
HTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.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 Demothis.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' />"
});
type will be ball-8bits.CUSTOM_ELEMENTS_SCHEMA as your schema in your main module.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.fullScreen: false), in that case your parent element of spinner must have position: relative; style property.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.
Inspired by Load Awesome by Daniel Cardoso.
Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.
ngx-spinner is MIT licensed.
FAQs
A library with more than 50 different loading spinners for Angular 4 - 17. (https://napster2210.github.io/ngx-spinner/)
The npm package ngx-spinner receives a total of 23,309 weekly downloads. As such, ngx-spinner popularity was classified as popular.
We found that ngx-spinner demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.