Der Balken nennt seinen Vorgang

<label for="datei">Datei auswählen</label>
<input id="datei" type="file">

<div id="lesebereich" aria-busy="false">
  <label for="lesefortschritt">Datei wird gelesen</label>
  <progress id="lesefortschritt" value="0" max="100">
    0 Prozent
  </progress>
</div>

<p id="lesestatus" role="status">Bereit.</p>

<label for="verbindung">Verbindung wird aufgebaut</label>
<progress id="verbindung"></progress>

Der Text im progress-Element ist Rückfallinhalt, kein zugänglicher Name. Diesen liefert das verknüpfte label.

const input = document.querySelector('#datei');
const feld = document.querySelector('#lesebereich');
const balken = document.querySelector('#lesefortschritt');
const status = document.querySelector('#lesestatus');
const reader = new FileReader();
let naechsteMeldung = 25;

input.addEventListener('change', () => {
  const datei = input.files[0];
  if (!datei) return;
  feld.ariaBusy = 'true';
  balken.value = 0;
  naechsteMeldung = 25;
  status.textContent = 'Datei wird gelesen.';
  reader.readAsArrayBuffer(datei);
});

reader.addEventListener('progress', (event) => {
  if (!event.lengthComputable) {
    balken.removeAttribute('value');
    return;
  }
  balken.max = event.total;
  balken.value = event.loaded;
  const prozent = Math.round(event.loaded / event.total * 100);
  if (prozent < naechsteMeldung) return;
  status.textContent = prozent + ' Prozent gelesen.';
  naechsteMeldung = Math.floor(prozent / 25) * 25 + 25;
});

reader.addEventListener('load', () => {
  feld.ariaBusy = 'false';
  status.textContent = 'Datei vollständig gelesen.';
});

reader.addEventListener('error', () => {
  feld.ariaBusy = 'false';
  status.textContent = 'Datei konnte nicht gelesen werden.';
});

lengthComputable entscheidet, ob loaded / total eine belastbare Spanne bildet. Andernfalls entfernt das Skript value.