基于jQuery的页面加载进度条nprogress.js使用教程

如果你登录谷歌的广告联盟,你就会发现它所采用的进度条和我们常见的不太一样。它在页面的最上面top部分,有一个线条在进行加载,我们俗称它为页面加载进度条。本文将借助 jQuery (点击有更多关于jQuery的用法案例)的 NProgress.js 插件来模仿它。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画。NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中。

下面是?NProgress.js 的4个主要函数:

  • NProgress.start() ? 显示进度条
  • NProgress.set(0.4) ? 设置百分比
  • NProgress.inc() ? 一个小增量
  • NProgress.done() ? 完成进度

安装

 $ npm install --save nprogress

或者直接引用 nprogress.js 和nprogress.css 文件到你的页面中。

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

下面是 NProgress.js 的一些基本的配置:

 Progress.configure({  
 minimum: 0.1,  template: "...",
 //标记修改  
 ease: 'ease',
 //动画设置  
 speed: 500,
 //动画速度  
 trickle: false,
 //关闭进度条  
 trickleRate: 0.02,
 //每次步进增长多少  
 trickleSpeed: 800,
 //步进间隔,单位毫秒ms  
 showSpinner: false
 //禁用进度环 
 });

nprogress.js 的用法很简单,只需要掌握下面的几个函数即可。

 NProgress.start();  
 // 开始加载  
 NProgress.done();  
 // 加载完成  
 NProgress.set(0.0);     
 // Sorta same as .start()  
 NProgress.set(0.4);  
 NProgress.set(1.0);     
 // Sorta same as .done()  
 NProgress.inc(); 
 // 递增  
 NProgress.done(true);  
 // 强制完成

下面看一个完整的例子:

 <!DOCTYPE html> 
 <html lang="en"> 
 <head>     
 <meta charset="UTF-8">     
 <meta http-equiv="X-UA-Compatible" content="IE=edge">     
 <meta name="viewport" content="width=device-width, initial-scale=1">     
 <title>web前端中文站lisa33xiaoq.net:NProgress.JS-页面加载进度条</title> 
 <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 <link rel="stylesheet" type="text/css" href="css/demo.css"> 
 <link rel="stylesheet" type="text/css" href="css/nprogress.css"> 
 </head> 
 <body> 
 <div class="container">     
 <div class="row main">         
 <div class="col-md-12">             
 <div class="row" style="margin-top: 30px">                 
 <div class="col-md-offset-2 col-sm-12">                     
 <p>Ajax异步加载,注意看页面顶部进度条</p>
 <br/>                     
 <button class="btn btn-info" id="loading">点击加载远程数据</button>                     
 <div id="msg" style="margin: 10px; color: #f60"></div>                 
 </div></div></div></div></div> 
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
 <script src="js/nprogress.js"></script> 
 <script> NProgress.start(); 
 setTimeout(function() { 
 NProgress.done(); }, 1000); 
 //web前端中文站:www.lisa33xiaoq.net
 $('#loading').on('click', function(event) {     
 event.preventDefault();     
 //NProgress.configure({ trickle: false });     
 NProgress.start();     
 $.get('data.php', function(data) {         
 $('#msg').html(data);         
 NProgress.done();     }); 
 //lisa33xiaoq.net }); 
 </script>  
 </body> 
 </html>

以上就是?NProgress.js 的相关教程,如有不懂,请留言讨论!

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到