Cacher is the code snippet organizer for pro developers

reader.addEventListener('progress', function(event) {
  var progress = parseInt(((event.loaded / event.total) * 100), 10);
  var progressElement = document.querySelector('.c-progress-bar').children[0];
  
  progressElement.style.width = progress + '%';
  progressElement.innerText = progress + '%';
});

<div class="c-progress-bar">
    <span style="width: 65%">65%</span>
</div>

/**
 * Can animate the progress by updating the width of the span element in javascript. Alternate solution would involve
 * using css animations.
 *
 * <div class="c-progress-bar">
 *     <span></span>
 * </div>
 */

/**
 * 1. Progress bar extends the full width of its parent container.
 * 2. Height is set automatically and is calculated based of the span's font-size and line-height properties. We can
 *    explicitly set the height of the progress bar if needed.
 */
.c-progress-bar {
    position: relative;
    width: 100%; /* 1 */
    height: auto; /* 2 */
    background-color: whiteSmoke;
    border: 1px solid rgb(44,62,80);
}

.c-progress-bar span {
    display: block;
    text-align: center;
    color: rgb(255,255,255);
    background-color: rgb(44,62,80);;
}