Requirements: HTTP requests are a very time-consuming process, when a user submits a form on the frontend, the backend needs various checks and then a persistent database, and the data is transmitted over the network. When a user submits a form, weYou don't want the user to be able to click on any action on the interface (or you don't want to repeatedly click Submit)。 We need an animation for global loading.
ng-http-loader This package provides an HTTP blocker and some spinner components (all from SpinKit for now). The HTTP blocker listens for all HTTP requests and displays a rotator/loader indicator during pending HTTP requests.
NPM address:The hyperlink login is visible.
GitHub address:The hyperlink login is visible.
Install the appropriate ng-http-loader version according to your Angular version, taking the Angular 17 version as an example, the installation command is as follows:
Since I am a standalone component, I modified app.config.ts as follows:
Meanwhile, the app.component.ts component is modified as follows:
Finally, modify the app.component.html code as follows:
The renderings are as follows:
For information on loading animation style effects, please refer to the following:
export 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'
};
|
Posted on 6/10/2024 3:09:56 PM
|
|
|
|
