如何给html页面添加动态等待效果

1、直接贴图：在界面上贴一个gif动态等待效果图片gif图片获取方式：网上找素材，会ps的可以自己制作<img src="wait.gif" />

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制下面提供一个CSS3绘制的范例

3、<style> .loading { width:0; height:0; border-ri爿讥旌护ght:20px solid #fff; border-top:20px solid #000; border-left:20px solid #fff; border-bottom:20px solid #000; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } .loading { animation: bganim 0.6s linear 0s infinite; -moz-animation: bganim 0.6s linear 0s infinite; -webkit-animation: bganim 0.6s linear 0s infinite; } @keyframes bganim { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @-moz-keyframes bganim { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } } @-webkit-keyframes bganim { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } </style>

4、<label>CSS3效果</label><div class="loading"></div>-------------------------------------------------效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

5、使用js等待效果插件(如：spin.js)

6、JS-------------------------颍骈城茇----------------------------var opts = { 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%' }; var target = document.getElementById('img_wait'); var spinner = new Spinner(opts).spin(target);

7、html---------------------------------<div id="img_wait"></div>

8、打开测试，效果如下