Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/silvareal/ngx-loading-x
Multiple Loaders / spinners in angular
https://github.com/silvareal/ngx-loading-x
angular loader loaders loading loading-animations loading-spinner loading-spinners loading-x
Last synced: 12 days ago
JSON representation
Multiple Loaders / spinners in angular
- Host: GitHub
- URL: https://github.com/silvareal/ngx-loading-x
- Owner: silvareal
- Created: 2020-06-04T22:04:19.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-08-15T21:45:29.000Z (over 1 year ago)
- Last Synced: 2024-04-24T20:02:57.391Z (7 months ago)
- Topics: angular, loader, loaders, loading, loading-animations, loading-spinner, loading-spinners, loading-x
- Language: TypeScript
- Homepage: https://ngx-loading-x.stackblitz.io/
- Size: 1.54 MB
- Stars: 8
- Watchers: 1
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/silvareal/ngx-loading-x/issues)  
# Ngx Loading X
# Demo
Check out the interactive live [demo](https://stackblitz.com/edit/ngx-loading-x)
# Getting Started
## Installation
Install `ngx-loading-x` version 1 from **NPM** using this command
```shell
npm install [email protected] --save
```
## For Angular v16
Install `ngx-loading-x` version 2 from **NPM** using this command
```shell
npm install [email protected] --save
```
> Thanks to [TaylorHo](https://github.com/taylorho/)
## Usage
Import `NgxLoadingXModule` into the root of your module
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { NgxLoadingXModule } from 'ngx-loading-x';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// Import NgxLoadingXModule
NgxLoadingXModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
create a boolean variable that is accessible from the component which will contain ngx-loading-x. This boolean is used as an input into ngx-loading to determine when the loading spinner is visible.
```js
import { Component, OnInit } from '@angular/core';
@Component({
//...
})
export class AppComponent implements OnInit {
//...
public loading = false;
constructor() { }
ngOnInit() { }
registerTest() {
// loading triggered
this.load = true;
setTimeout(() => {
// loader stops after 5s
this.load = false,
// ..
this.register = true;
}, 5000)
}
}
```
Include `ngx-loading-x` component selector to your app component templates, Set the [show] input variable of ngx-loading-x to point to your boolean i.e load, which will determine the `ngx-loading-x` visibility.
```html
```
`ngx-loading-x` component selector attributes
## `ngx-loading-x` component selector Attributes
| Attributes | Type | Required | Default | Description |
| :--- | :--- | :--- | :--- | :--- |
| `show` | boolean | optional | `false` | Determines the visibility of the loader |
| `bgLogoUrl` | string | optional | `(empty string)` | Logo Url |
| `bgOpacity` | number | optional | `5` | background opacity |
| `bgLogoUrlPosition` | number | optional | `bottom-right` | Logo position. available positions can be accessed via `POSITION` |
| `bgLogoUrlSize` | number | optional | `100` | Logo size |
| `spinnerType` | string | optional | `wandering-cubes` | Spinner animation type. available types can be accessed via `SPINNER` |
| `spinnerSize` | number | optional | ` 120` | Spinner size |
| `spinnerColor` | string | optional | `#dd1b16` | Spinner color |
| `spinnerPosition` | string | optional | `center-center` | Spinner position. available positions can be accessed via `POSITION` |
# `NgxLoadingXBlur` Directive
If you want your page content is blurred/frosted while showing the loading background overlay.
```html
```
## Attribute
| Attributes | Type | Required | Default | Description |
| :--- | :---: | :---: | :---: | :--- |
| `bgBlur` | boolean | optional | `5` | blurred/frosted background |
# Custom configuration for `NgxLoadingXModule`
You can override the default configuration via `forRoot()` method.
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxLoadingXConfig, POSITION, SPINNER, NgxLoadingXModule } from 'ngx-loading-x';
const ngxLoadingXConfig: NgxLoadingXConfig = {
show: false,
bgBlur: 2,
bgOpacity: 5,
bgLogoUrl: '',
bgLogoUrlPosition: POSITION.topLeft,
bgLogoUrlSize: 100,
spinnerType: SPINNER.wanderingCubes,
spinnerSize: 120,
spinnerColor: '#dd0031',
spinnerPosition: POSITION.centerCenter,
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
NgxLoadingXModule.forRoot(ngxLoadingXConfig)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
| Attributes | Type | Required | Default | Description |
| :--- | :--- | :--- | :--- | :--- |
| `show` | boolean | optional | `false` | Determines the visibility of the loader |
| `bgLogoUrl` | string | optional | `(empty string)` | Logo Url |
| `bgOpacity` | number | optional | `5` | background opacity |
| `bgBlur` | boolean | optional | `5` | blurred/frosted background |
| `bgLogoUrlPosition` | number | optional | `bottom-right` | Logo position. available positions can be accessed via `POSITION` |
| `bgLogoUrlSize` | number | optional | `100` | Logo size |
| `spinnerType` | string | optional | `wandering-cubes` | Spinner animation type. available types can be accessed via `SPINNER` |
| `spinnerSize` | number | optional | ` 120` | Spinner size |
| `spinnerColor` | string | optional | `#dd1b16` | Spinner color |
| `spinnerPosition` | string | optional | `center-center` | Spinner position. available positions can be accessed via `POSITION` |