...

Vue прогрес бар

малък модул, който показва % от прочетената страница
преди 5 месеца

Малък прогрес бар в горната част на страницата, показваща процент от прочетената цяла страница:

<template>
    <div id="progress" class="top-bar" :style="'background:linear-gradient(to right, #e8ba59 ' + scroll + '%, transparent 0);'"></div>
</template>
<script>
    export default {
        data(){
            return{
                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;
            }
        }
   }
</script>
<style>
.top-bar {
  position: fixed;
    height: 10px;
    width: 100%;
    background-color: white;
    top: 0;
}
</style>

Резултата в Codepen