今天给大家分享一款超酷的仿yutube顶部加载进度条NProgress.js。

nprogress.js 一款类似youtube、Medium等网站上的小进度条插件。star高达22.7K。

安装/引入

通过npm方式安装插件。

$ npm i nprogress -S

通过js和css引入方式。

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

// CDN引入
https://unpkg.com/nprogress@0.2.0/nprogress.js
https://unpkg.com/nprogress@0.2.0/nprogress.css

使用

通过调用start()和done()方法即可控制进度条显示和完成。

NProgress.start()
NProgress.done()

还支持百分比和缓慢步进操作。

NProgress.set(0.6)
NProgress.inc(0.2)

在vue.js项目中可以通过如下方式调用。

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

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

很多的网站都有使用这款进度条插件，非常适合Turbolinks, Pjax或其他Ajax密集型应用程序。

# 官网地址
https://ricostacruz.com/nprogress/

# 仓库地址
https://github.com/rstacruz/nprogress

End~ 以上就是这次的分享，感谢大家的阅读。