ngx-loader-indicator

NGX LOADER INDICATOR

NGX LOADER INDICATOR is the best directive to have loader without wrapping your element to additional component

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

$ npm install --save ngx-loader-indicator

bun

$ bun 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
      },
    }),
  ]
  (...)
})