npm i ngx-loading

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxLoadingModule } from 'ngx-loading';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxLoadingModule.forRoot({}),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgxLoadingModule } from 'ngx-loading';

import { AppComponent } from './app.component';

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

NgxLoadingModule.forRoot({}),

providers: [],

bootstrap: [AppComponent],

})

export class AppModule {}

app.component.ts

import {
  Component
} from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  loading = false;

  // Optional configuration for the loading spinner
  loadingConfig = {
    primaryColour: '#007bff',
    secondaryColour: '#6c757d',
    tertiaryColour: '#d1ecf1',
  };

  showLoading() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false; // Automatically hide after 3 seconds
    }, 3000);
  }

  hideLoading() {
    this.loading = false;
  }
}

import {

Component

} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss'],

})

export class AppComponent {

loading = false;

// Optional configuration for the loading spinner

loadingConfig = {

primaryColour: '#007bff',

secondaryColour: '#6c757d',

tertiaryColour: '#d1ecf1',

};

showLoading() {

this.loading = true;

setTimeout(() => {

this.loading = false; // Automatically hide after 3 seconds

}, 3000);

}

hideLoading() {

this.loading = false;

}

app.component.html

<div>
<button (click)="showLoading()">Show Loading</button>
<button (click)="hideLoading()">Hide Loading</button>
</div>

<!-- Loading spinner -->
<ngx-loading [show]="loading" [config]="loadingConfig"></ngx-loading>

<div>

<button (click)="showLoading()">Show Loading</button>

<button (click)="hideLoading()">Hide Loading</button>

</div>

<ngx-loading [show]="loading" [config]="loadingConfig"></ngx-loading>

Angular ngx-loading Example to Show Loading Spinner & Progressbar in Browser Using TypeScript

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives