progress

进度条美化库nprogress和Html5的progress标签简要。

nprogress

关于github这种加载的进度条，简单了解发现使用的https://github.com/rstacruz/nprogress这种。

CDN地址

基本原理是监听页面ajax请求前、ajax请求变化和ajax请求后的事件，来模拟进度条加载情况。

简单demo

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

NProgress.remove();

Jquery使用demo

$("#loading").ajaxStart(function(){
    NProgress.start();
});
$("#loading").ajaxStop(function(){
    NProgress.done();
});

没有ajax的demo

$(document).ready(function(){
    NProgress.start();
})
$(window).load(function(){
    NProgress.done();
})

Turbolinks和Pjax的使用方式见https://github.com/rstacruz/nprogress。

Html5的特性中也有进度条，兼容性较差。各个浏览器显示状态不太一致。

简单使用

1	<progress></progress>

具体使用见MDN。