版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/80873632
首先分享两个loading的网站，https://loading.io/，https://icons8.com/preloaders/，可以在网站上找loading，也可以自己用css实现loading效果，css浏览器前缀可以通过http://autoprefixer.github.io/这个网站转换
接下来直接上代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>加载进度条</title>
<style>
* {
padding: 0;
margin: 0;
}
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.loading .pic {
width:100px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
font-size: 25px;
text-align: center;
line-height: 100px;
}
.loading .pic span {
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 10px;
left: 10px;
/* background: #066; */
border-radius: 50%;
box-shadow: 0 3px 0 #666;
-webkit-animation: rotate 1s infinite linear;
animation: rotate 1s infinite linear;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loading">
<div class="pic">
<!--外面的圈圈-->
<span></span>
<!--数据加载进度（百分比数字）-->
<b>0%</b>
</div>
</div>
...//此处为页面需要加载的图片
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$(function(){
var img = $("img");
var num = 0;
img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
/*清掉重复请求*/
oImg.onload = null;
num ++;
var load = parseInt(num/$("img").size()*100)+"%";
$(".loading b").html(load);
if(num >= i){
$(".loading").fadeOut();
}
}
oImg.src = img[i].src;
});
});
</script>
</body>
</html>
波浪loading
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条3</title>
<style>
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.loading .pic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loading .pic i {
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
/*各个竖线的高度缩小到40%的长度*/
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
/*调用动画load，动画完成总时间为1.2s，连续做动画*/
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
/*设置每个竖线的延长时间，第一个不用延长时间，第二个依次延长0.1s*/
.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
/*定义加载动画load*/
@-webkit-keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
</style>
</head>
<body>
<!-- 遮挡页面 -->
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
...//此处为页面需要显示的图片
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
document.onreadystatechange = function(){
if(document.readyState == "complete"){
$(".loading").fadeOut();
}
}
</script>
</body>
</html>