Eugeno / ngx-loader-indicator

Awesome loader for angular applications. No wrappers only you elements

NGX Loader INDICATOR

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

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

You can see the full documentation with examples.

Installing

$ npm install --save ngx-loader-indicator

Quickstart

Import ngx-loader-indicator module in Angular app.

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

(...)

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

Usage

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

Examples

<form (ngSubmit)="save(form.value)" [formGroup]="form" [loader]="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>

ngx-loader-indicator 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
      },
    }),
  ]
  (...)
})