源码分享网_ihszz.com、源码论坛、源码分享、站长资源、源码交易-源分享

HTML进度指示器神器-PACE

作者 : y412539429 发布时间: 2017-10-28 14:26:18 1035 人阅读 加入收藏

最近在github看到一个进度指示器,不需要任何代码自动检测进度

名字叫PACE,访问可能需要翻墙

使用方法:在head中插入下列代码

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/blue/pace-theme-barber-shop.css" rel="stylesheet"/>
</head>

实现进度条加载完后显示网页内容

把body的内容全部包含在一个div中 利用css实现div默认隐藏 display:None

<html>
	<head>
		<script src="/js/pace/pace.js"></script>
		<link href="/js/pace/themes/blue/pace-theme-loading-bar.css" rel="stylesheet"/>
	</head>
	<body>
		<div id="b" style="display:None">
		</div>
	</body>
</html>

调用PACE的方法 实现在进度条加载完后显示div

<script>
//Pace事件  进度条被隐藏
Pace.on('hide', function()
{
    //显示div b
    document.getElementById(\"b\").style.display=\"\";
});
</script>

HTML进度指示器神器-PACE