页面进度条

其他 2020-03-23 16:47:17 阅读次数: 0

使用定时器模拟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.loading{
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;	
		}

		.loading .pic{
			width:815px;
			height: 517px;
			background: url("loading.png");
			border: 1px soild red;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}

	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		//var loading = '<div class="loading"><img src="" alt="" class="pic" /></div>';
		//$('body').append(loading);

		setInterval(function(){
			$(".loading").fadeOut();
		},3000);
	})
	</script>
</head>
<body>
	<div class="loading">
		<img src="" alt="" class="pic" />
	</div>
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
</body>
</html>

推荐一个网站，https://icons8.com/preloaders/ 在线生成动画图标。

根据页面加载

知识点普及
document.onreadystatechange
document.readyState 值有如下4种
uninitialized还未开始载入
loading 载入中
interactive 已加载，文档与用户可以开始交互
complete 载入完成
第一种方式使用定时器其实是假操作。

<script type="text/javascript">
		document.onreadystatechange=function(){
			if(document.readyState=="complete"){
				$(".loading").fadeOut();
			}
		}
	</script>

CSS3进度条动画

引入图片会造成加载慢，使用css3动画一般情况下会使页面加载更快些。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		@keyframes ldio-mkzxv2deru {
			0% { transform: rotate(0) }
			100% { transform: rotate(360deg) }
		}
		.ldio-mkzxv2deru div { box-sizing: border-box!important }
		.ldio-mkzxv2deru > div {
			position: absolute;
			width: 144px;
			height: 144px;
			top: 28px;
			left: 28px;
			border-radius: 50%;
			border: 16px solid #000;
			border-color: #e15b64 transparent #e15b64 transparent;
			animation: ldio-mkzxv2deru 1s linear infinite;
		}

		.ldio-mkzxv2deru > div:nth-child(2), .ldio-mkzxv2deru > div:nth-child(4) {
			width: 108px;
			height: 108px;
			top: 46px;
			left: 46px;
			animation: ldio-mkzxv2deru 1s linear infinite reverse;
		}
		.ldio-mkzxv2deru > div:nth-child(2) {
			border-color: transparent #f8b26a transparent #f8b26a
		}
		.ldio-mkzxv2deru > div:nth-child(3) { border-color: transparent }
		.ldio-mkzxv2deru > div:nth-child(3) div {
			position: absolute;
			width: 100%;
			height: 100%;
			transform: rotate(45deg);
		}
		.ldio-mkzxv2deru > div:nth-child(3) div:before, .ldio-mkzxv2deru > div:nth-child(3) div:after { 
			content: "";
			display: block;
			position: absolute;
			width: 16px;
			height: 16px;
			top: -16px;
			left: 48px;
			background: #e15b64;
			border-radius: 50%;
			box-shadow: 0 128px 0 0 #e15b64;
		}
		.ldio-mkzxv2deru > div:nth-child(3) div:after {
			left: -16px;
			top: 48px;
			box-shadow: 128px 0 0 0 #e15b64;
		}

		.ldio-mkzxv2deru > div:nth-child(4) { border-color: transparent; }
		.ldio-mkzxv2deru > div:nth-child(4) div {
			position: absolute;
			width: 100%;
			height: 100%;
			transform: rotate(45deg);
		}
		.ldio-mkzxv2deru > div:nth-child(4) div:before, .ldio-mkzxv2deru > div:nth-child(4) div:after {
			content: "";
			display: block;
			position: absolute;
			width: 16px;
			height: 16px;
			top: -16px;
			left: 30px;
			background: #f8b26a;
			border-radius: 50%;
			box-shadow: 0 92px 0 0 #f8b26a;
		}
		.ldio-mkzxv2deru > div:nth-child(4) div:after {
			left: -16px;
			top: 30px;
			box-shadow: 92px 0 0 0 #f8b26a;
		}
		/* .loadingio-spinner-double-ring-8spnkqbhqnp {
			width: 200px;
			height: 200px;
			display: inline-block;
			overflow: hidden;
			background: #bde3bc;
		} */
		.loadingio-spinner-double-ring-8spnkqbhqnp {
			width: 100%;
			height: 100%;
			display: inline-block;
			overflow: hidden;
			background: #bde3bc;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;	
		}
		/* .ldio-mkzxv2deru {
			width: 100%;
			height: 100%;
			position: relative;
			transform: translateZ(0) scale(1);
			backface-visibility: hidden;
			transform-origin: 0 0; see note above
		} */
		.ldio-mkzxv2deru {
			width: 100%;
			height: 100%;
			position: relative;
			transform: translateZ(0) scale(1);
			backface-visibility: hidden;
			transform-origin: 0 0; /* see note above */
			/* position: absolute; */
			top: 32%;
			left: 42%;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.ldio-mkzxv2deru div { box-sizing: content-box; }
		/* generated by https://loading.io/ */
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		document.onreadystatechange=function(){
			if(document.readyState=="complete"){
				$(".loadingio-spinner-double-ring-8spnkqbhqnp").fadeOut();
			}
		}
	</script>
</head>
<body>
	<div class="loadingio-spinner-double-ring-8spnkqbhqnp">
		<div class="ldio-mkzxv2deru">
			<div></div>
			<div></div>
			<div>
				<div></div>
			</div>
			<div>
				<div></div>
			</div>
		</div>
	</div>
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">



</body>
</html>

进度条动画推荐网站http://www.loading.io
CSS兼容写法的网站http://autoprefixer.github.io

自定义页面进度条

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		@keyframes load {
			0% ,40%,100%{ transform: scaleY(0.4); }
			20% { transform: scaleY(1); }
		}
		
		.loading{
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;	
		}

		.loading .pic{
			width:50px;
			height: 50px;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.loading .pic i {
			display: block;
			float: left;
			width:6px;
			height: 50px;
			margin:0 2px;
			background-color: #399;
			transform: scaleY(0.4);
			animation: load 1.2s infinite;
		}

		.loading .pic i:nth-child(2){
			animation-delay: 0.1s;
		}
		.loading .pic i:nth-child(3){
			animation-delay: 0.2s;
		}
		.loading .pic i:nth-child(4){
			animation-delay: 0.3s;
		}
		.loading .pic i:nth-child(5){
			animation-delay: 0.4s;
		}
	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
		document.onreadystatechange=function(){
			if(document.readyState=="complete"){
				$(".loading").fadeOut();
			}
		}
	</script>
</head>
<body>
	<div class="loading">
		<div class="pic">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</div>
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">



</body>
</html>

定位在头部的进度条

这种方法利用浏览器从上而下加载资源，利用css3动画animate来改变进度条宽度，当到达100%的时候，利用回调函数隐藏进度条。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.loading{
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;	
		}

		.loading .pic{
			width:0%;
			height: 5px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #345;
		}
		

	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	
</head>
<body>
	<div class="loading">
		<div class="pic">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</div>
	<header>
		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	</header>
	<script type="text/javascript">
		$(".loading .pic").animate({width:"10%"},100)
	</script>
	<section class="about">
		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	</section>
	<script type="text/javascript">
		$(".loading .pic").animate({width:"40%"},100)
	</script>
	<section class="news">
		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
	</section>
	<script type="text/javascript">
		$(".loading .pic").animate({width:"80%"},100)
	</script>
	<footer>
		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">		
	</footer>
	<script type="text/javascript">
		$(".loading .pic").animate({width:"100%"},100,function(){
			$(".loading").fadeOut();
		})
	</script>
	
	
	



</body>
</html>

获取实时数据的进度条

知识点
建立图像对象 new Image()
属性 border complete height…
事件 onload onerror onkeydown onkeypress…
src属性一定要写到onload的后面，否则程序在IE中会出错。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;padding:0;
		}
		.loading{
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
		}

		.loading .pic{
			width: 100px;
			height: 100px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin:auto;
			/* border:1px solid red; */
			text-align: center;
			font-size: 18px;
			line-height: 100px;
		}

		.loading .pic span{
			display: block;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			/* background: #345; */
			top: 10px;
			left: 10px;
			position: absolute;
			box-shadow:0 3px 0 #012;
			animation: rotate 1s infinite linear;
		}

		@keyframes rotate{
			0%{transform: rotate(0deg);}
			100%{transform: rotate(360deg);}
		}


	</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var img = $("img");
		var num = 0;
		img.each(function(i){
			var oImg = new Image();
			oImg.onload = function(){
				oImg.onload = null; // 避免重复加载
				num++;
				$(".loading .pic b").html(parseInt(num/$("img").size()*100)+"%");
				if(num>=i){
					$(".loading").fadeOut();
				}
			};
			// src赋值一定要放在onload之后
			oImg.src = img[i].src;
		});
	})
	</script>
</head>
<body>
	<div class="loading">
		<div class="pic">
			<span></span>
			<b>0%</b>
		</div>
	</div>


		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
		<img src="https://img2.mukewang.com/szimg/59eeb022000162bc05400300-360-202.jpg">
		<img src="https://www.mycodes.net/js/wsisp.gif">
		<img src="https://img.mukewang.com/5de0b94d0982077300000000.jpg">
		<img src="https://f12.baidu.com/it/u=1530392225,760540738&fm=76">
		<img src="https://t11.baidu.com/it/u=1790917018,1039287315&fm=76">
		<img src="https://t10.baidu.com/it/u=281972922,2207100776&fm=76">

	
	
	



</body>
</html>
黄宝康
发布了1201 篇原创文章 · 获赞 289 · 访问量 209万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/huangbaokang/article/details/104837750
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022