Изисквания: HTTP заявките са много времеемък процес, когато потребителят подава формуляр на фронтенда, бекендът се нуждае от различни проверки и след това постоянна база данни, а данните се предават през мрежата. Когато потребител подаде формуляр, ниеНе искате потребителят да може да кликва върху всяко действие в интерфейса (или не искате да натискате Изпрати многократно).。 Имаме нужда от анимация за глобално зареждане.
ng-http-loader Този пакет предоставя HTTP блокер и някои спинър компоненти (всички от SpinKit засега). HTTP блокерът слуша всички HTTP заявки и показва индикатор за ротатор/зареждач по време на чакащи HTTP заявки.
Адрес на NPM:Входът към хиперлинк е видим.
GitHub адрес:Входът към хиперлинк е видим.
Инсталирайте подходящата ng-http-loader версия според вашата Angular версия, като вземете версията Angular 17 за пример, командата за инсталация е следната:
Тъй като съм самостоятелен компонент, модифицирах app.config.ts по следния начин:
Междувременно компонентът app.component.ts се модифицира по следния начин:
Накрая, модифицирайте app.component.html кода по следния начин:
Визуализациите са както следва:
За информация относно зареждане на ефекти в стил анимация, моля, вижте следното:
експорт конст Спинкит = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-plane',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'ск-три-отскок',
skWanderingCubes: 'sk-wandering-cubes',
skWave: 'sk-wave'
};
|
Публикувано в 10.06.2024 г. 15:09:56 ч.
|
|
|
|
