Awesome

<a href="http://jsdaddy.io/img/logo.png"> <h1 align="center">NGX LOADER INDICATOR</h1> </a> <p align="center"> NGX LOADER INDICATOR is the best directive to have loader without wrapping your element to additional component </p>

You can also try our NGX MASK check it. You can also try our NGX COPYPASTE check it.

You can try live demo with examples.

Installing

$ npm install --save ngx-loader-indicator

Quickstart if ngx-loader-indicator version >= 15.0.0

Pay attention this version works for angular >= 14.0.0

Configure for application with provideEnvironmentNgxLoaderIndicator

bootstrapApplication(AppComponent, {
    providers: [
        provideAnimations(),
        provideEnvironmentNgxLoaderIndicator(),
        (...)
    ],
}).catch((err) => console.error(err));

or configure for feature with provideNgxLoaderIndicator and import standalone directive NgxLoaderIndicatorDirective

@Component({
    selector: 'my-feature',
    templateUrl: './my-feature.component.html',
    styleUrls: ['./my-feature.component.css'],
    standalone: true,
    imports: [NgxLoaderIndicatorDirective, (...)],
    providers: [
        (...)
        provideNgxLoaderIndicator({
            img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
            loaderStyles: {
                background: 'rgba(255, 255, 255, 0.8)',
            },
            imgStyles: {
                width: '50px',
                background: 'yellow',
            },
            rotate: {
                duration: 5000,
            },
        }),
    ],
})
export class MyFeatureComponent {}

Quickstart if ngx-loader-indicator version < 15.0.0

Pay attention this version works for angular < 12.0.0

Import module in needed module.

import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'

(...)

@NgModule({
  (...)
  imports: [
    NgxLoaderIndicatorModule.forRoot(options)
  ]
  (...)
})

Usage

<div [ngxLoaderIndicator]="isLoading">Content</div>

Examples

<form (ngSubmit)="save(form.value)" [formGroup]="form" [ngxLoaderIndicator]="isLoading">
    <h2>Login</h2>
    <input matInput type="email" placeholder="Email" #email formControlName="email" />
    <input matInput type="password" placeholder="Password" #name formControlName="password" />
    <button mat-button [disabled]="form.invalid">Login</button>
</form>

Options

You can define your custom options

custom img (string) and colors

  {
    img: string,
    imgStyles: {
      width: string, // '30px'
      background: string, // 'yellow' or rgb(255, 255, 0)
    }
  }

custom wrapper layout colors

  {
    loaderStyles: {
      background: string,
    },
  }

animations options for image rotation

    rotate: {
      delay?: number;
      direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
      duration: number
      easing?: string;
      endDelay?: number;
      fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
      id?: string;
      iterationStart?: number;
      iterations?: number;
    },

Usage

import {NgxLoaderIndicatorModule} from 'ngx-loader-indicator'

(...)

@NgModule({
  (...)
  imports: [
    NgxLoaderIndicatorModule.forRoot({
      img: 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4',
      loaderStyles: {
        background: 'rgba(255, 255, 255, 0.8)',
      },
      imgStyles: {
        width: '100px',
        background: 'yellow',
      },
      rotate: {
        duration: 5000
      },
    }),
  ]
  (...)
})