Кастомный ajax-loader для Битрикса

document.addEventListener('DOMContentLoaded', function() {
    'use strict';

/*
 * Кастомный ajax-loader, заменяет стандартный Битриксовский
 *
 * Для вызова ajax-лоадера в своих скриптах
 * используйте BX.showWait('id элемента-родителя или объект, опционально, - в нем будет искаться has-loader');
 *
 * Для скрытия BX.closeWait();
 * 
 * Если добавить обертку кнопке (элемент div) и присвоить ей class="has-loader",
 * то лоадер будет помещаться внутри него (справа по центру, с небольшим отступом),
 * иначе - в элементе body (справа вверху)
 *
 * Если лоадер скрывается и вы не успеваете изменить стили для него -
 * раскомментируйте строку в скрипте
 * throw "Спецошибка для прерывания и проверки стилей";
 *
 */ 

    let spinner = document.createElement('div');
    spinner.className = 'spinner';

    let style = document.createElement('style');
    style.innerHTML = `
.spinner {
    display: block;
    background-color: #23282d; /* Dark Gray */
    opacity: 0.75;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 7rem;
    top: 7rem;
    transform: translate(50%, -50%);
    z-index: 200000;
}
.spinner.right {
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.spinner::before {
    content: '';
    position: absolute;
    background-color: #fbfbfc; /* Light Gray */
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
    .spinner::before {
        animation-name: blink;
        animation-duration: 2000ms;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}`;

    document.body.appendChild(style);

    if (typeof(BX) != 'undefined') {
        // eslint-disable-next-line no-undef
        BX.ready(function() {
            // eslint-disable-next-line no-undef
            BX.showWait = function(node) {

                let nodeEl, hasLoader, target;

                switch(typeof node) {
                    case 'object':
                        nodeEl = node;
                        break;

                    case 'string':
                        nodeEl = document.getElementById(node);
                        break;

                    default:
                        nodeEl = false;
                        break;
                }

                if (nodeEl) {
                    // Если указан объект вызова
                    hasLoader = nodeEl.querySelector('.has-loader');
                    if (hasLoader) {
                        hasLoader.style.position = 'relative';
                        spinner.classList.add('right');
                        target = hasLoader;
                    } else {
                        target = nodeEl;
                    }
                } else {
                    target = document.body;
                }

                target.appendChild(spinner);
            };
            // eslint-disable-next-line no-undef
            BX.closeWait = function() {
                // тут удаление элемента
                // throw "Спецошибка для прерывания и проверки стилей";
                if (spinner) spinner.classList.remove('right');

                if (spinner && spinner.parentNode)
                    spinner.parentNode.removeChild(spinner);
            };
        });
    }
});