Custom loading dialog in PrimeNG

PrimeNG ha tra i suoi componenti il ProgressSpinner.

In pratica è il classico cerchio che gira che ci consente di dire all'utente che si sta caricando qualcosa.

Oggi vediamo un semplice esempio su come visualizzarlo dentro ad un Dialog.

Qui il codice HTML:

<p-dialog [(visible)]="isLoading" [showHeader]="false" [resizable]="false" [modal]="true" [focusOnShow]="false">
    <div style="width: 900px;height: 500px;padding-top: 20%;">
        <div class="progress-spinner">
            <p-progressSpinner></p-progressSpinner>
        </div>
    </div>
</p-dialog>

Qui invece il codice Typescript:

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

@Component({
    selector: 'app-cliente',
    templateUrl: './cliente.component.html',
    styleUrls: ['./cliente.component.scss']
})

export class ClienteComponent implements OnInit {

    isLoading: boolean;

    constructor() {
    }

    ngOnInit(): void {
        this.isLoading = false;
    }

}

Ovviamente in questo caso il dialog parte in caricamento di pagina e non termina; dovete impostare voi la logica di apertura/chiusura del dialog.

Vi basterà cambiare il valore della variabile isLoading.

Oltre a questo ho aggiunto anche un pò di CSS:

.progress-spinner {
	height: 100px;
	width: 120px;
	margin: auto;
}

Enjoy!