pc端和移动端顶部加载条

最新推荐文章于 2024-07-30 16:49:50 发布

Carry-Lee

最新推荐文章于 2024-07-30 16:49:50 发布

阅读量1.3k

点赞数 1

分类专栏： JS css 文章标签：顶部加载条移动 pc

本文链接：https://blog.csdn.net/qq604598861/article/details/52404408

版权

JS 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

简单的写了一下详细请参考官网 https://github.com/rstacruz/nprogress

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<link rel="stylesheet" type="text/css" href="css/nprogress.css">

</head>
<body ng-controller="index">

	NProgress.start() — 显示进度条
	NProgress.set(0.4) —设置百分比
	NProgress.inc() — 增加一点点
	NProgress.done() — 完成进度条

	<script src="js/jquery-1.11.3.js"></script>
	<script src="js/nprogress.js"></script>
	<script type="text/javascript">
		NProgress.set(0.3);
		var xml = null;
		if (window.XMLHttpRequest) {
			xml = new XMLHttpRequest();
		}else if(window.ActiveXObjec){
			xml = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (xml != null) {
			xml.onreadystatechange = function() {
				if (xml.readyState == 4 && xml.status == 200) {
					console.log(xml.responseText);
					NProgress.set(1.0);				
				}
			}
			xml.open("POST","1.json",true);
			xml.send();
		}
	</script>
</body>
</html>