插件使用一进度条---nprogress

nprogress 是像youtube一样在顶部出现进度条,用在一些加载比较缓慢的场景中。

官方网站是 http://ricostacruz.com/nprogress/

源码在 https://github.com/rstacruz/nprogress 

使用方法:

1、引入jquery库

2、引入css和js

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

3、使用

在<body>开始标签使用启动

1
NProgress.start();

在</body>结束标签使用完成

1
NProgress.done();
<!DOCTYPE html5>
<html>
	<head>
		<title>进度条</title>
		<meta charset="UTF-8" />
		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
		<link rel='stylesheet' href='nprogress.css'/>
		<script src='nprogress.js'></script>
		<style type="text/css">
			
		</style>
	</head>
	<body><script>NProgress.start();</script>
	<button>点我</button>
	<script>
			
	</script>
	</body ><script>NProgress.done();</script>
</html>

  

猜你喜欢

转载自www.cnblogs.com/max-hou/p/9669671.html
今日推荐