Кастомный глобальный индикатор загрузки (лоадер)

Я покажу, как реализовать глобальный индикатор загрузки с помощью корневого виджета. Это позволит использовать его в любом месте системы без дублирования кода.

Все подробности в видео, а ниже используемый код.

Код из скриптов корневого виджета:

Код:

declare const window: any;

const spinnerWrapperClassName = 'loader-wrapper';
const spinnerClassName = 'custom-loader';

/** Отобразить лоадер */
function show(): void {
    const loaderWrapper = window.document.createElement("div");
    loaderWrapper.className = spinnerWrapperClassName;
    loaderWrapper.innerHTML = `<div class="${spinnerClassName}"></div>`;
    window.document.body.appendChild(loaderWrapper);
}

/** Скрыть лоадер */
function hide(): void {
    const loader = window.document.body.querySelector(`.${spinnerWrapperClassName}`);
    if (loader) {
        loader.remove();
    }
}

window.CustomLoader = {
    show,
    hide
}

Код для отображения и скрытия индикатора загрузки:

Код:

declare const window: any;

asyn function action() {
    window.CustomLoader.show() //показать лоадер
    //логика скрипта
    window.CustomLoader.hide() //скрыть лоадер
}

Стили для индикатора загрузки:

HTML:

<style>
  .loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .custom-loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid #606060;
    border-bottom-color: #000000ff;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    opacity: 0.75;
  }
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

Еще больше полезной информации в ТГ канале WhatDaELMA365