今天给大家分享一个轻量级Vue.js全屏滚动进度条组件VueScrollProgress。

vue-scroll-progress 一款基于vue.js构建的页面滚动进度条组件，非常小巧，GZIP压缩后不到1KB。

安装

$ npm i vue-scroll-progress -S

也支持通过CDN引入使用。

<script src="https://cdn.jsdelivr.net/npm/vue-scroll-progress/"></script>
<script src="https://unpkg.com/vue-scroll-progress/"></script>
<script src="https://bundle.run/vue-scroll-progress"></script>

引入组件

// 在main.js中引入
import Vue from 'vue';
import VueScrollProgress from 'vue-scroll-progress';

Vue.use(VueScrollProgress);

快速使用

<template>
  <div id="app">
    <VueScrollProgress></VueScrollProgress>
  </div>
</template>

<!-- 自定义进度条样式 -->
<style>
/* play with some lines below */
#progress-container-el {
  /* background */
  background-color: transparent !important;
  top: calc(100% - 4px) !important;
}
#progress-el {
  /* progress bar */
  background-color: red !important;
}
</style>

大家如果用的到的话，也可以去看一看。

# 预览地址
https://spemer.github.io/vue-scroll-progress/

# 仓库地址
https://github.com/spemer/vue-scroll-progress

ok，今天就分享到这里。希望能喜欢~~