如何在加载 Angular 应用程序之前显示动画？

Question

I want to add a 2 second animation(SVG animation) screen, before my angular app shows up. So, each time someone goes to the url, the first 2 seconds will be of the animation, and then the Angular app will show up. Is this possible? I'd really appreciate any help in this, thanks and have a great day!

Here's the code for the animation :

The svg code in html:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 700 680" width="700" height="680"><defs><clipPath id="_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc"><rect width="700" height="680"/></clipPath></defs><g clip-path="url(#_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc)"><g opacity="0.4"><path class="path1" d=" M 0 71.043 L 257.59 659.127 L 466.578 153.666 L 245.439 153.666" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="#c6c6c6" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/></g></g></svg>

And the css:

.path1{
    stroke-width:6;
    stroke-dasharray : 500;
    stroke-dashoffset : 1410.1248779296875;
    animation:test 6s linear alternate infinite;
}

@keyframes test{
    from{
        stroke-dashoffset:2351.569580078125; 
    }

    to{
        stroke-dashoffset:0;
    }
}

Answer 1

A simply solution would be to wait for 2 seconds in app component before proceeding

app.component.html

<ng-container *ngIf="animated">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 700 680" width="700" height="680"><defs><clipPath id="_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc"><rect width="700" height="680"/></clipPath></defs><g clip-path="url(#_clipPath_wuO8YUgcuSMrLnSCtxnoIiXwy9UN2HRc)"><g opacity="0.4"><path class="path1" d=" M 0 71.043 L 257.59 659.127 L 466.578 153.666 L 245.439 153.666" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="#c6c6c6" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/></g></g></svg>
</ng-container>

<ng-container *ngIf="!animated">
<router-outlet></router-outlet>
</ng-container>

app.component.ts

export class AppComponent {

 animated = true;

  constructor() {
    setTimeout(() => {    // <<<---    using ()=> syntax
      this.animated = false;
      });
     }, 2000);
  }
}