Создайте загрузку Spinner перед отправкой запроса Javascript XMLHttpRequest

Я использую ванильный класс javascript, который отправляет запрос на другую страницу. Я хочу, чтобы загрузчик загружался в браузер для ожидания завершения запроса на отправку.

Ниже приведен мой код, который вызывает счетчик загрузки перед созданием экземпляра XMLHttpRequest. И удалите счетчик загрузки после завершения загрузки XMLHttpRequest.

ошибки нет, но я не вижу счетчика загрузки в своем браузере... Можете ли вы сказать мне, что мне не хватает?

class BYEPC_HTTPRequest {
    constructor(uri, params) {
        this.uri = uri;
        this.params = params;
        this.response;
        this.loadingSpinner(); // I added loadingSpinner to document before XMLHttpRequest.
        this.callQueryPage();
    }

    loadingSpinner() {
        document.body.insertAdjacentHTML('beforeend', 
            `
            <style>
            .loader {
                border: 16px solid #f3f3f3;
                border-radius: 50%;
                border-top: 16px solid #3498db;
                animation: spin 2s linear infinite;
                z-Index: 100000;
                position: fixed;
                display: block;
                boxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);                    
                width: 70px;
                height: 70px;
                top: 50%;
                left: 50%;
                top: 40%;
                left: 40%;
                transform: translate(-50%, -50%);
                msTransform: translate(-50%, -50%);
                webkitTransform: translate(-50%, -50%);
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            </style>
            <div id = "loader" class = "loader"></div>
            `            
        );
    }

    callQueryPage() {        
          
        var httpRequest = new XMLHttpRequest();

        httpRequest.onloadend = function(e) {
            document.getElementById('loader').remove();
        };

        let _this = this;
        httpRequest.onreadystatechange = function(){           
            if (httpRequest.readyState === XMLHttpRequest.DONE) 
            {                
                if (httpRequest.status === 200) 
                {                                                          
                    _this.response = httpRequest.responseText;
                } 
                else 
                {                    
                    alert("status : " + httpRequest.status);                    
                }                
            }             
        }

        httpRequest.open("POST", this.uri, false);          
       
        httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        
        httpRequest.send(this.params);
    }         

    sleep(delay) {       
        const delayUntil = Date.now() + delay;

        while(Date.now() < delayUntil);
    }
}