Loader przy metodzie AJAX

Hej, w jaki sposób mogę dodać loader albo progress bar w skrypcie:

        var btn = document.getElementById("Submit1");
        btn.addEventListener("click", function () {
            var myRequest = new XMLHttpRequest();
            var url = '@Url.Content("~/")' + "Home/CheckSeriesTeams";
            var param = "competitionId=" + $('#LeagueId').val() + "&countryId=" + $('#CountryId').val();
            myRequest.open('GET', url + "?" + param, true);
            myRequest.onload = function () {
                var myData = JSON.parse(myRequest.responseText);
                console.log(myData);
                renderHTML(myData);
            };
            myRequest.send();
        });

Czy da się zrobić progress bar %-owy, jeżeli w AJAX wywołuję tylko akcję kontrolera, a cała logika siedzi już w serwisie i tam program przechodzi przez pętle kodu, które wykonują się X razy?

isLoading = true;
onLoad  = () => isLoading = false;

Tak, poprzez progress event i jego właściwości. Dodajesz event listener i obliczasz postęp.

Ogólnie:

function showProgressBar() {
    /* ... */
}

function hideProgressBar() {
    /* ... */
}

btn.addEventListener("click", function () {
    /* ... */

    myRequest.onload = function () {
        hideProgressBar();
        /* ... */
    };

    showProgressBar();
    myRequest.send();
});

Możliwe jest również zwracanie konkretnego postępu w procentach, lecz wtedy musiałbyś dostosować backend, aby w jakiś sposób mógł zakomunikować ile jeszcze zostało - o ile całość żądania nie będzie trwała kilkunastu minut, IMO nie jest to gra warta świeczki i zwyczajne kółko z napisem Ładowanie w zupełności wystarczy.

@SkrzydlatyWąż: Backend nie zwraca content-length, zwraca konkretny model do widoku z kilkoma właściwościami.
@Patryk27 : Generalnie na backend mam wywoływane API, które przetwarzam odpowiednio. Tych wywołań jest sporo ze względu na to, że zwracany array może mieć tylko 30 elementów, więc wywołuję kolejno endpoint inkrementując odpowiedni parametr. Trwa to około 1min, więc miło by było gdyby zbudować taki pasek ładowania.

Dzięki za pomoc, poradziłem sobie z tym pokazując/ukrywając plik gif z loaderem.