PanBlogs
网页顶部加载进度条NProgress
Installation
Add [nprogress.js] and [nprogress.css] to your project.
html
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/><script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>NProgress is available via bower and npm and spm.
$ bower install --save nprogress
$ npm install --save nprogress
Basic usage
Simply call start() and done() to control the progress bar.
js
NProgress.start();
NProgress.done();NProgress.start();
NProgress.done();Using [Turbolinks] or similar? Ensure you're using Turbolinks 1.3.0+, and use this: (explained here)
js
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });