方法:1、直接貼圖:在界面上貼壹個gif動態等待效果圖片,gif圖片獲取方式:網上找素材,會ps的可以自己制作<img src="wait.gif" />
2、CSS3/SVG/HTML5 Canvas手動繪制等待效果:
這種效果:網上有很多類似素材,可以根據需要選擇,或使用上述技術繪制
下面提供壹個CSS3繪制的範例
3、CSS的代碼如下:
<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>
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、打開測試,效果如下