NProgress.js的简单使用

最新推荐文章于 2024-08-08 08:13:20 发布

_冷月心

最新推荐文章于 2024-08-08 08:13:20 发布

阅读量2.9k

点赞数 1

文章标签： nprogress

本文链接：https://blog.csdn.net/qq_42813491/article/details/89448412

版权

NProgress.js的简单使用

说明

这东西依赖jquery

获取

CDN方式

npm方式

npm install nprogress

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>NProgress的使用</title>
	<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
</head>
<body>

<script>
	$(function() {
	 　　NProgress.start();
	 　　$(window).load(function() {
	   　　NProgress.done();
	 	})
 })
</script>
</body>
</html>

配合ajax

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>NProgress的使用</title>
	<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
	<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
</head>
<body>

<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
</body>
</html>