How do I correctly add a loading indicator when loading via API?

Question

How do I correctly add a loading indicator when loading via API? When you click on the button, the event does not count as the file upload via php. Outputs the NaN value. I would like it to calculate the percentages correctly. I don’t know where to insert e. Loadd so that it counts.

js

  <script>
    let form = document.getElementById('appForm');
    let messageBox = document.getElementById('message');
    let fileInputLabel = document.getElementById('file_input_label');
    let fileInput = document.getElementById('file_input');
    let submitButton = document.getElementById('upload_modsfire');
    let urlBox = document.getElementById('xf_download1');
    let sizeBox = document.getElementById('xf_sizefile');

    let progressWrapper = document.getElementById('progress_wrapper');
    let progressBar = document.getElementById('progress_upload');
    let progressStatus = document.getElementById('progress_status');

    function inputFilename() {
        fileInputLabel.innerText = fileInput.files[0].name;
    }

    submitButton.addEventListener('click', function (e) {
        e.preventDefault()
        let formData = new FormData(form);
        submitButton.innerHTML = 'Please wait <i class="fad fa-spinner-third fa-spin"></i>'

        **let loaded = e.loaded;
        let total = e.total;
        let percent_stage = (loaded / total) * 100;**

        progressWrapper.classList.remove('d-none')
        progressBar.setAttribute("style", `width: ${Math.floor(percent_stage)}%`);
        progressStatus.innerText = `${Math.floor(percent_stage)} загружено`

        fetch('https://modeland.ru/engine/modsfire/form.php', {
            method: 'POST',
            body: formData,
        }).then(response => response.json())
            .then(data => {
                if(data.status) {
                    console.log(data)
                    submitButton.innerText = `Файл успешно загружен`;
                    submitButton.classList.replace('btn-outline-primary', 'btn-outline-success')
                    messageBox.innerHTML = `<div class="alert alert-primary mt-2 mb-1 alert-dismissible fade show" role="alert">
                                                ${data.message}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                  <span aria-hidden="true">&times;</span>
                                                </button>
                                              </div>`;
                    urlBox.setAttribute('value', data.url);
                    sizeBox.setAttribute('value', data.size);
                }
                else {
                    submitButton.classList.replace('btn-outline-primary', 'btn-outline-danger')
                    submitButton.innerText = 'Загрузка прервана. Повторите...'
                    messageBox.innerHTML = `<div class="alert alert-danger mt-2 mb-1 alert-dismissible fade show" role="alert">
                                                ${data.message}
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                  <span aria-hidden="true">&times;</span>
                                                </button>
                                              </div>`;
                }
            })
    })
</script>