查询时页面显示正在查询js+css简单实现

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吧。