頁面頂部加載頁面時的進度條是如何實現的

疑問如何實現進度條加載的呢

---

  在頁面中能展示的無非就是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()
})

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