I have a website that when a user submits the data a function runs and requests a php backend to insert the data into the database but i want to display the spinner on the button when the request has been sent but the on progress function just not working .i have tried everything else please help me.

here is my code of JavaScript

let s_form = document.querySelector("#con-form");

s_form.addEventListener("submit", (e) => {
e.preventDefault();
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let mobno = document.getElementById("mobno").value;
let concern = document.getElementById("concern").value;
const xhr_obj = {
name: name,
email: email,
mobno: mobno,
concern: concern,
};
let data_send = JSON.stringify(xhr_obj);
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost/dc/utilities/php/h_f_s.php", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onprogress = function () {
console.log("appendChild");
 //this is not working why can you find out
};
xhr.onload = function () {
console.log("loaded");
 //this works perfect
};
xhr.send(data_send);
});