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

百度经验

页面数据加载中...

337452184
337452184

web页面开发过程，基本流程：查询-->>显示；

查询时间或长或短，为了提升用户体验，目前用的比较多的手段之一就是查询等待时添加一个动态等待效果

1/8

1、直接贴图：

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

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

<img src="wait.gif" />

1/8

该信息未经授权抓取自百度经验

该信息未经授权抓取自百度经验
该信息未经授权抓取自百度经验

2/8

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

3/8

<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-anima
<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
tion: 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>
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/8

<label>CSS3效果</label>

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

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

效果如下图：

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

5/8

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

6/8

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,
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
 top: '50%',  left: '50%' }; var target = document.getElementById('img_wait'); var spinner = new Spinner(opts).spin(target);
= new Spinner(opts).spin(target);

7/8

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

8/8

打开测试，效果如下

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

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

[重新阅读]
辅助模式