加载效果一：
页面html：
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title>加载loding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/n-base.css">
</head>
<body>
<div class="loading_box">
<div id="insuranceListH">
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
/**
*
* 功能：loading效果
* 参数：父节点Id
* 方法和调用
**/
function loading(Id){
var str = '<div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';
$("#"+Id).html(str);
return false;
}
loading('insuranceListH');
</script>
</html>
css样式：
/*loading*/
.spinner {
margin: 100px auto;
50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #2196F3;
height: 100%;
6px;
display: inline-block;
margin: 2px;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
效果显示：
