Fetch visual progress

by Julien Etienne

HTML

<dvi class="bar"><div class="progress" id="progress"></div></dvi>

CSS

body{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.bar{
  width: 100vw;
  height: 2rem;
  background: #222;
  position: absolute;
  top: 0;
}

.progress{
  position: relative;
  float: left;
  height: 100%;
  width: 0%;
  background: lime;
}

JavaScript

const exe = () => {

  const file = 'https://html.spec.whatwg.org/';

  async function* makeTextFileLineIterator(fileURL) {
    const utf8Decoder = new TextDecoder("utf-8");
    let response = await fetch(fileURL);
    let reader = response.body.getReader();
    let {
      value: chunk,
      done: readerDone
    } = await reader.read();
    chunk = chunk ? utf8Decoder.decode(chunk) : "";

    let re = /\r\n|\n|\r/gm;
    let startIndex = 0;
    let result;

    for (;;) {
      let result = re.exec(chunk);
      if (!result) {
        if (readerDone) {
          break;
        }
        let remainder = chunk.substr(startIndex);
        ({
          value: chunk,
          done: readerDone
        } = await reader.read());
        chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
        startIndex = re.lastIndex = 0;
        continue;
      }
      yield chunk.substring(startIndex, result.index);
      startIndex = re.lastIndex;
    }
    if (startIndex < chunk.length) {
      // last line didn't end in a newline char
      yield chunk.substr(startIndex);
    }
  }

  for (let line of makeTextFileLineIterator(file)) {
    console.log(line);
  }


}

exe()