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

1、直接贴图：

在界面上贴一个gif动态等待效果图片

gif图片获取方式：网上找素材，会ps的可以自己制作

<img src="wait.gif" />

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

下面提供一个CSS3绘制的范例

<style>

.loading { 

width:0;

height:0;

border-right: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>

<label>CSS3效果</label>

<div class="loading"></div>

-------------------------------------------------

效果如下图：

运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

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

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);

html

---------------------------------

<div id="img_wait"></div>

打开测试，效果如下