页面顶部加载页面时的进度条是如何实现的

疑问如何实现进度条加载的呢

---

  在页面中能展示的无非就是css看到的样子和html写的骨架，以及js实现的动画，那我现在我们就来看下，具体是什么样子的。先来说下快速实现这个东西方法。
  由于我是在Vue项目中用到的，我就简单的说下用法：
  [nprogress](https://ricostacruz.com/nprogress/)
  [https://loading](https://loading.io/progress/) `国外网站`

先安装插件

yarn add nprogress

然后引用在main.js中引用

// 引入
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 在路由中使用
router.beforeEach((to, from, next) => {
  nprogress.start()
  next();
})

router.afterEach(() => {
  nprogress.done()
})

最有就可以在页面中看到效果了