<div id="app" style="height: 800px;">
  <div id="progress" class="top-bar" :style="'background:linear-gradient(to right, #e8ba59 ' + scroll + '%, transparent 0);'"></div>
  <div class="fixed-center">
    <h3>
      скролирайте страницата, за да видите движението на прогрес бар-а
    </h3>
  </div>
</div>
.top-bar {
  position: fixed;
    height: 20px;
    width: 100%;
    top: 0;
}
.fixed-center {
  position: fixed;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
}
View Compiled
const app = new Vue({
     delimiters: ['${', '}'],
    el: '#app',
    data:{
      h: document.documentElement,
                b: document.body,
                st: 'scrollTop',
                sh: 'scrollHeight',
                scroll: 0,
    },
        created() {
            document.addEventListener('scroll', this.progressBar);
        },
        destroyed() {
            document.removeEventListener('scroll', this.progressBar);
        },
    methods: {
      progressBar(){
                /*Refresh scroll % width*/
                this.scroll = (this.h[this.st] || this.b[this.st]) / ((this.h[this.sh] || this.b[this.sh]) - this.h.clientHeight) * 100;
            }
    }
    
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js