Persyaratan: Permintaan HTTP adalah proses yang sangat memakan waktu, ketika pengguna mengirimkan formulir di frontend, backend memerlukan berbagai pemeriksaan dan kemudian database persisten, dan data dikirimkan melalui jaringan. Saat pengguna mengirimkan formulir, kamiAnda tidak ingin pengguna dapat mengklik tindakan apa pun di antarmuka (atau Anda tidak ingin berulang kali mengklik Kirim)。 Kita membutuhkan animasi untuk pemuatan global.
ng-http-loader Paket ini menyediakan pemblokir HTTP dan beberapa komponen pemintal (semuanya dari SpinKit untuk saat ini). Pemblokir HTTP mendengarkan semua permintaan HTTP dan menampilkan indikator rotator/loader selama permintaan HTTP yang tertunda.
Alamat NPM:Login hyperlink terlihat.
Alamat GitHub:Login hyperlink terlihat.
Instal versi ng-http-loader yang sesuai sesuai dengan versi Angular Anda, dengan mengambil versi Angular 17 sebagai contoh, perintah instalasi adalah sebagai berikut:
Karena saya adalah komponen mandiri, saya memodifikasi app.config.ts sebagai berikut:
Sementara itu, komponen app.component.ts dimodifikasi sebagai berikut:
Terakhir, ubah kode app.component.html sebagai berikut:
Renderingnya adalah sebagai berikut:
Untuk informasi tentang pemuatan efek gaya animasi, silakan lihat yang berikut ini:
ekspor const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-three-bounce',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Diposting pada 10/06/2024 15.09.56
|
|
|
|
