# ngx-loading
> A customisable loading spinner for Angular applications.
Latest version **17.0.0** (published 2024-01-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install ngx-loading
pnpm add ngx-loading
yarn add ngx-loading
bun add ngx-loading
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 17.0.0 |
| Published | 2024-01-28 |
| First published | 2017-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 185.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 263 |
| Author | Zak Cox |
| Maintainers | zak-c |
| Keywords | Angular, ng, ngx, load, loading, spinner, busy, wait, loading, loading-animations, loading-indicator, loading-screen, loadingview, loading-page, ngx, loadingscreen, progress, progress-loader, progress-indicators, progress-circle, loaders, ivy, ngx-loading, Angular loading, Angular spinner, Angular loading spinner |
## Links
- npm: https://www.npmjs.com/package/ngx-loading
- Repository: https://github.com/Zak-C/ngx-loading
- Homepage: https://github.com/Zak-C/ngx-loading#readme
- Issues: https://github.com/Zak-C/ngx-loading/issues
- npm.io page: https://npm.io/package/ngx-loading
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.3.0
## Alternatives
- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads
## Recent versions
- 17.0.0 (latest) — 2024-01-28
- 17.0.0-rc.3 — 2024-01-28
- 17.0.0-rc.2 — 2024-01-28
- 17.0.0-rc.1 — 2024-01-28
- 16.0.0 — 2024-01-21
- 16.0.0-rc.1 — 2024-01-21
- 15.0.0 — 2023-01-15
- 15.0.0-rc.1 — 2023-01-15
- 14.0.0 — 2022-07-22
- 14.0.0-rc.1 — 2022-07-22
- 13.0.1 — 2022-06-07
- 13.0.1-rc.1 — 2022-06-07
- 13.0.0 — 2022-02-03
- 13.0.0-rc.1 — 2022-02-03
- 7.0.0 — 2019-10-08
- … 25 more at https://npm.io/package/ngx-loading/versions
## README
# ngx-loading
A customisable loading spinner for Angular applications.
[](https://badge.fury.io/js/ngx-loading)
[]()
## Table of contents
1. [Demo](#demo)
2. [Installation](#installation)
3. [Getting started](#getting-started)
4. [Input parameters](#input-parameters)
5. [Config options](#config-options)
## Demo
Check out the interactive demo on [StackBlitz](https://stackblitz.com/edit/ngx-loading-sample?file=src/app/app.component.html "ngx-loading StackBlitz demo").
## Installation
Install ngx-loading via NPM, using the command below.
### NPM
```shell
npm install --save ngx-loading
```
NOTE: Version 17 of this package requires Angular 17 as a dependency. If you are using an older version of Angular, please install the relevant version e.g. 2.0.1 for Angular 2:
```shell
npm install --save ngx-loading@2.0.1
```
## Getting started
Import the `NgxLoadingModule` in your root application module:
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { NgxLoadingModule } from "ngx-loading";
@NgModule({
//...
imports: [
//...
NgxLoadingModule.forRoot({}),
],
//...
})
export class AppModule {}
```
You must create a boolean variable (e.g. `loading` below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.
```typescript
import { Component, OnInit } from "@angular/core";
@Component({
//...
})
export class AppComponent implements OnInit {
//...
public loading = false;
constructor(private authService: AuthService) {}
ngOnInit() {}
Login() {
this.loading = true;
this.authService.login(this.email, this.password).subscribe(
(res) => {
this.loading = false;
//...
},
(err) => {
this.loading = false;
//...
}
);
}
}
```
Next, add the ngx-loading component selector to your application component's template. Set the `[show]` input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the `[config]` input variable of ngx-loading to setup custom configuration options. If the `[config]` input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options) for further information.
You can also optionally define a `[template]` input variable, which can be used to inject your own custom templates into the component.
NOTE: ngx-loading will fill the entirety of its parent component. If you wish for ngx-loading to only fill a specific element within your component, ensure that ngx-loading is a child element of that element, and that the containing element has its `position` attribute set to `relative`.
```html
Loading...
//...
```
## Input parameters
| Input | Required | Details |
| -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| show | Required | A boolean, which will determine when ngx-loading is visible. |
| config | Optional | A set of configuration options for ngx-loading. If this is not specified, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See [Config options](#config-options). |
| template | Optional | A TemplateRef, which will be displayed within the ngx-loading component. Use this to inject your own custom templates into the component. |
## Config options
| Option | Required | Default | Details |
| ------------------------ | -------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| animationType | Optional | ngxLoadingAnimationTypes.threeBounce | The animation to be used within ngx-loading. Use the ngxLoadingAnimationTypes constant to select valid options. |
| backdropBorderRadius | Optional | 0 | The border-radius to be applied to the ngx-loading backdrop, e.g. '14px'. |
| backdropBackgroundColour | Optional | rgba(0, 0, 0, 0.3) | The background-color to be applied to the ngx-loading backdrop, e.g. 'rgba(255, 255, 255, 0.2)'. |
| fullScreenBackdrop | Optional | false | Set to true to make the backdrop full screen, with the loading animation centered in the middle of the screen. |
| primaryColour | Optional | #ffffff | The primary colour, which will be applied to the ngx-loading animation. |
| secondaryColour | Optional | #ffffff | The secondary colour, which will be applied to the ngx-loading animation (where appropriate). |
| tertiaryColour | Optional | #ffffff | The tertiary colour, which will be applied to the ngx-loading animation (where appropriate). |
Config options can be set globally (using the `.forRoot() module import statement`), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { NgxLoadingModule, ngxLoadingAnimationTypes } from "ngx-loading";
@NgModule({
//...
imports: [
//...
NgxLoadingModule.forRoot({
animationType: ngxLoadingAnimationTypes.wanderingCubes,
backdropBackgroundColour: "rgba(0,0,0,0.1)",
backdropBorderRadius: "4px",
primaryColour: "#ffffff",
secondaryColour: "#ffffff",
tertiaryColour: "#ffffff",
}),
],
//...
})
export class AppModule {}
```
```html
Loading...
//...
```
---
_Source: https://npm.io/package/ngx-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._