var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
          if (xhr.status === 200) {
            var urlCreator = window.URL || window.webkitURL;
            var videoUrl = urlCreator.createObjectURL(this.response);
            var fileName = `${candidateName}_${viewType}_${testName}.mp4`;
            var tag = document.createElement("a");
            tag.href = videoUrl;
            tag.download = fileName;
            document.body.appendChild(tag);
            tag.click();
            document.body.removeChild(tag);
            urlCreator.revokeObjectURL(videoUrl);
          } else {
            alert("Failed to download video");
          }
        };
        xhr.onerror = function () {
          console.log("An error occurred while downloading the video");
        };
        xhr.send();

I’m trying to download a video but chrome only shows the download bar after the video has downloaded, I want it to show a progress bar while the video is downloading so that the user knows it’s downloading.

Chrome should have ideally shown a progress bar for the download but the download bar is only shown after the video has downloaded, leaving the user clueless about the download