Sometimes content on the page take time to load, because of which the user might see the content with improper design. To avoid that we could show the loader untill the content is loaded properly.

Below is our code for showing loader for 3 seconds on intial page load. This code is in the file app.vue, you can find this file on this path: src > app > shared > components > ui > loader folder

loader.html

 
<div class="loader-wrapper" [class.d-none]="loaderHide">
  <div class="loader1">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

loader.ts

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

@Component({
   selector: 'app-loader',
   imports: [],
   templateUrl: './loader.html',
   styleUrl: './loader.scss'
})
export class Loader{

   public loaderHide: boolean = false;

   constructor(){
      setTimeout(() => {
         this.loaderHide = true;
      }, 5000);
   }
}

We have added the loader div and given the animation in its scss file.

Toggle Loader

To show and hide the loader we toggle loaderHide class through show variable. Style for the loaderHide class has been define below, it toggles display of the div between none and visible. Initially we have kept show to true, but when the component is mounted we run a function which call the setTimeout function. setTimeout functions overwrites the value of show variable to false after 5 second.

If you want to make changes in the animation or the design of the loader, you can navigate to src > assets > scss > components > loader.scss. Here default styles and animation has been given, make changes as per your needs.

You can modify the timing of the loader by changing the time in setTimeout function. Instead of 5000ms you can set any time as per your needs.