码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-09-18 17:14:27      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:button   jquer   启动   htm   number   ajax   table   在顶部   index   

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>

  

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

标签:button   jquer   启动   htm   number   ajax   table   在顶部   index   

原文地址:https://www.cnblogs.com/max-hou/p/9669671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!