加载页面怎么显示战队(jQuery加载数据加载状态)

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画。NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中。
加载页面怎么显示战队(jQuery加载数据加载状态)

下面是 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>业余草: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/>

<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);

//业余草:www.xttblog.com

$(‘#loading’).on(‘click’, function(event) {

event.preventDefault();

//NProgress.configure({ trickle: false });

NProgress.start();

$.get(‘data.php’, function(data) {

$(‘#msg’).html(data);

NProgress.done();

});

//业余草:www.xttblog.com

});

</script>

</body>

</html>

以上就是 NProgress.js 的相关教程

发表评论

登录后才能评论