Trying to use onprogress state to show loading text, JavaScript Ajax

I was trying to get loading text before content is loaded from the file. The code is working well except that the loading text does not appear. For this I am using JavaScript Ajax. But I could not get what I wanted. Here is the code. Any suggestions how this will work as I intended. Please suggest in comment area.

document.getElementById("load-btn").addEventListener("click", function(){
    const xhr = new XMLHttpRequest();

    xhr.open("GET","data.txt",true);
let time='';
    //xhr.onprogress = function(){
    xhr.onprogress = setInterval(() => {
            document.getElementById("output").innerText = "Loading...";
        }, 5000);
            
       
        
   // }

    xhr.onload = function(){
        if(this.status === 200){
           clearInterval(time);
            // console.log(this.responseText);
            document.getElementById("output").innerText = this.responseText;
        }
    }

    xhr.send();
})