1 样式
.overlay.dark { z-index: -1; background: rgba(0,0,0,.7); opacity: 0; }
.overlay.show { display: block; animation: showDialog 1s forwards; -webkit-animation: showDialog 1s forwards; }
.overlay.hide { display: block; animation: hideDialog 1s forwards; -webkit-animation: hideDialog 1s forwards; }
2 html部分(一个div)
<div id="loadCarInfo" class="overlay">
<div class="loading">
<div>
<div>
<ul id="spin" class="spin">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div>请稍候,正在查找您的保单信息。</div>
</div>
</div>
</div>
3 js部分(jquery实现)
一般点击比如查询按钮后,js部分是一个ajax请求方法。在方法的开始写上
$("#loadCarInfo").fadein();
在ajax的success部分写上
$("#loadCarInfo").faceout();
很easy吧。