web页面开发过程，基本流程：查询-->>显示；查询时间或长或短，为了提升用户体验，目前用的比较多的手段之一就是查询等待时添加一个动态等待效果
工具/原料
文本编辑器
方法/步骤
1、直接贴图：在界面上贴一个gif动态等待效果图片gif图片获取方式：网上找素材，会ps的可以自己制作<imgsrc="wait.gif"/>
2、CSS3/SVG/HTML5Canvas手动绘制等待效果：这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制下面提供一个CSS3绘制的范例
3、<style> .loading{ width:0; hei壹执慵驾ght:0; border-ri爿讥旌护ght:20pxsolid#fff; border-top:20pxsolid#000; border-left:20pxsolid#fff; border-bottom:20pxsolid#000; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; } .loading{ animation:bganim0.6slinear0sinfinite; -moz-animation:bganim0.6slinear0sinfinite; -webkit-animation:bganim0.6slinear0sinfinite; } @keyframesbganim{ from{transform:rotate(0deg);}to{transform:rotate(360deg);} } @-moz-keyframesbganim{ from{-moz-transform:rotate(0deg);}to{-moz-transform:rotate(360deg);} } @-webkit-keyframesbganim{ from{-webkit-transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);} }</style>
4、<label>CSS3效果</label><divclass="loading"></div>-------------------------------------------------效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
5、使用js等待效果插件(如：spin.js)
6、JS-------------------------颍骈城茇----------------------------varopts={ lines:9, length:0,艘早祓胂 width:15, radius:20, corners:1, rotate:0, direction:1, color:'#0101DF', speed:1, trail:34, shadow:false, hwaccel:false, className:'spinner', zIndex:2e9, top:'50%', left:'50%' }; vartarget=document.getElementById('img_wait'); varspinner=newSpinner(opts).spin(target);
7、html---------------------------------<divid="img_wait"></div>
8、打开测试，效果如下
