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 2 seconds on initial page load. you can find loader component on this path: src > app > shared > components > ui > loader folder

loader.component.html

<div class="loader-wrapper" [class.hidden]="loaderHide">
    <div class="loader-index"> <span></span></div>
        <svg>
            <defs></defs>
            <filter id="goo">
            <fegaussianblur in="SourceGraphic" stddeviation="11" result="blur"></fegaussianblur>
            <fecolormatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"> </fecolormatrix>
            </filter>
        </svg>
    </div>
</div>

loader.component.ts

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

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

export class LoaderComponent {

    public loaderHide: boolean = false;

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

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

To show and hide the loader we toggle display: none through loaderHide variable. 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 2 second.

If you want to make changes in the animation or the design of the loader, you can navigate to public > 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 2000ms you can set any time as per your needs.