Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/JsDaddy/ngx-loader-indicator below:

JsDaddy/ngx-loader-indicator: Awesome loader for angular applications. No wrappers only you elements

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.

$ npm install --save ngx-loader-indicator

$ bun install --save ngx-loader-indicator

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 {}

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

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

<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>

You can define your custom options

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

  {
    loaderStyles: {
      background: string,
    },
  }

    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;
    },

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4