IT博客汇 | How to create pre-loading before page load in Angular

How to create pre-loading before page load in Angular

Winson发表于 2023-10-03 14:22:58

1. Introduction

When you access a website, it needs to load many elements or components and this will take a few times (based on the network and server workload), for giving users a better experience, we can use a pre-loading to show the page is in loading status.

2. How it’s working

I have written an article for creating a loading in Angular with ngx-loading, the loading for waiting for data return from API, but this time, I will show you a different way and create a global loading with css.

The pre-loading will show before every page is loaded to avoid the case that the page is blank before loaded, so we should put the loading in one global page and don’t need to call it manual every time. So we can use any css to customize the loading style.

Ok, let’s start it!

3. Create the loading with CSS

We can put the loading code in src/index.html, that will be great for putting a global loading, and we just need to use the style sheet to custom the loading, put the below after head

<!-- MyDemo.Client\src\index.html -->

<style type="text/css">
  .global-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 1;
    transition: opacity .5s ease-in-out;
  }

  .global-loader-fade-in {
    opacity: 0;
  }

  .global-loader-hidden {
    display: none;
  }

  .global-loader h1 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-size: 24px;
    letter-spacing: .04rem;
    white-space: pre;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image:
      repeating-linear-gradient(
        to right,
        #f44336,
        #9c27b0,
        #3f51b5,
        #03a9f4,
        #009688,
        #8bc34a,
        #ffeb3b,
        #ff9800
      );
    background-size: 750% auto;
    background-position: 0 100%;
    animation: gradient 20s infinite;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
  }

  @keyframes gradient {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: -750% 0;
    }
  }
  </style>

and put a div for loading text, so the body will be like below

<!-- MyDemo.Client\src\index.html -->

<body>
  <app-root></app-root>
  <div id="globalLoader" class="global-loader"><h1>LOADING</h1></div>
</body>

4. Create a service

The service is very common and useful in Angular, it can help to do many things in multiple components, so we also need to create a service in this case:

//MyDemo.Client\src\app\services\preloader.service.ts

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root',
})
export class PreloaderService {
  private selector = 'globalLoader';

  constructor(@Inject(DOCUMENT) private document: Document) {}

  private getElement() {
    return this.document.getElementById(this.selector);
  }

  hide() {
    const el = this.getElement();
    if (el) {
      el.addEventListener('transitionend', () => {
        el.className = 'global-loader-hidden';
      });

      if (!el.classList.contains('global-loader-hidden')) {
        el.className += ' global-loader-fade-in';
      }
    }
  }
}

As you can see, we use the service to hide the loading, so it will show by default when the page is loading, and it will be hidden after the page is loaded

5. Use the service

We can hide the loading in app.component.ts :

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { PreloaderService } from './services/preloader.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {
  constructor(private preloader: PreloaderService) {}

  title = 'MyDemo.Client';

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.preloader.hide();
  }
}

The code is very simple, just handling the hide action in ngAfterViewInit event will be ok~

6. Conclusion

This is the simple way to handle page pre-loading issues, and don’t need to use other libs, you can also create any other loading styles with CSS, but this is unable to replace the ngx-loading,, if you want, you can try to use ngx-loading to replace the CSS loading 🙂

The post How to create pre-loading before page load in Angular first appeared on Coder Blog.