nprogress
made with Vuejs

简介及使用教程

这是一个类似youtube、Medium等网站上的小进度条插件。纳米级的进度条,涓涓细流动画告诉你的用户,一些事情正在发生!

非常适合Turbolinks、PJax或其他Ajax密集型应用程序。

安装

NPM

npm install --save nprogress

Yarn

yarn add nprogress

直接引入js、css或者通过cdn引入。

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

使用

直接调用 start()或者done()来控制进度条。

NProgress.start();
NProgress.done();

可以通过调用 .set(n)来设置进度,n是0-1的数字。

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

可以使用inc()随机增长进度条,注意,这个方法永远不会让进度条达到100%。

NProgress.inc();

通过使用done()让进度条关闭。

NProgress.done(true);

示例

desc.gif

作者

Rico Sta. Cruz

@rstacruz

相关项目

这是一个阅读位置指示器。
这个是基于Vue.js的简单的svg进度条,基于 circles项目二次开发。
这是一个可以设置任何路径的进度条和加载器。
这是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。
这是一个顶部加载进度条Vue.js组件。
这是一个简单的类似油管(Youtube)加载条的Vue组件。
这是一个显示进度条动画的按钮插件,兼容Vue 2.x。