Vue

by kabanoki

HTML

<div id="app">
  <div class="box" v-for="n in 10">height:150px</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).vueScrollProgress=t()}(this,function(){"use strict";var e={install:function(e,t){e.mixin({mounted:function(){var e,t,n,o,d;function l(){d=document.documentElement.scrollHeight-document.documentElement.clientHeight}(e=document.createElement("div")).id="progress-container-el",e.style.position="fixed",e.style.width="100%",e.style.height="4px",e.style.backgroundColor="transparent",e.style.left=0,e.style.right=0,e.style.top=0,e.style.zIndex=99999,(t=document.createElement("div")).id="progress-el",t.style.width="0px",t.style.height="4px",t.style.backgroundColor="#42b883",n=0,o=0;document.body.addEventListener("resize",((e,t,n)=>{var o;return()=>{const d=this,l=arguments,i=n&&!o;clearTimeout(o),o=setTimeout(function(){o=null,n||e.apply(d,l)},t),i&&e.apply(d,l)}})(()=>{l()},200,!1),!1),l(),window.addEventListener("scroll",()=>{n=document.body.scrollTop||document.documentElement.scrollTop,o=n/d*100,t.style.width=o+"%"}),document.getElementById("progress-container-el")||(e.appendChild(t),document.body.appendChild(e))}})}};return"undefined"!=typeof window&&window.Vue&&(window.VueScrollProgress=e),e});
</script>

CSS

body {
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  transition: all 0.2s;
}

.box {
  height:150px;
  padding:15px;
  border-bottom:1px solid #000;
}

Vue

const VueScrollProgress = window['VueScrollProgress']
Vue.use(VueScrollProgress);
new Vue({
  el: '#app', 
});