Smooth progress bar animation using requestAnimationFrame

animate.js

const makeLoader = (progressEl, updateProgressCount, initialProgress=0) => {
  let progressCount = initialProgress
  const load = () => {
    progressCount = updateProgressCount(progressCount)
    progressEl.value = progressCount
    requestAnimationFrame(load) // don't need to use setTimeout - will only be called ~60 times/second
  }
  return load
}

// will make the progress bar loop between 0 and 100
const incrementMod100 = (i) => (i + 1) % 100

// alternatively... as an idea
const MakeXHRProgessMonitor = (requestObject) => {
  const XHRProgessMonitor = () => {
    // calculate loaded and total...
    return (loaded / total) * 100
  }
  return XHRProgessMonitor
}

const progressEl = document.getElementById("progress")
const loader = makeLoader(progressEl, incrementMod100)
requestAnimationFrame(loader)

index.html

<progress id="progress" value="0" max="100" />