同期処理で、プログレススピナー(バー)を表示することって可能でしょうか？

Question

前提・実現したいこと

初心者なので、単語の使い方が間違っていたらごめんなさい。
RESTサービスでPOST通信時に、レスポンスが返ってくるまでプログレススピナーを出したいです

現状のシステム概要

①画面上で、インプットを入力し、POST通信
②サーバ上で、Pythonプログラムが実行
③htmlがサーバから返却

という普通のシステムなのですが、
上記の①～③の間に、プログレススピナーを出したいです

ネットで調べても、Ajaxの非同期処理時のスピナーの出し方しか出てこないのですが、
HTML + Javascriptの非同期処理ではプログレススピナーは出せないのでしょうか？

Answer 1

var XHR = new XMLHttpRequest();
XHR.addEventListener('progress', updateProgress, false);
XHR.open();

function updateProgress(e) {
    var progress = parseInt(e.loaded/e.total*100);
    console.log(progress + '%')　
}

                
$.ajax({
  type:'POST',
    url  : '送信先url',
    data : '送信データ',
    async: true,
    xhr : function(){
        var XHR = $.ajaxSettings.xhr();
        if(XHR.upload){                       
            XHR.upload.addEventListener('progress',function(e){
                var progress = parseInt(e.loaded/e.total*100);
                console.log(progress + '%')　
            }, false);
        }
        return XHR;
    },
})