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

楼上的总结也很全面，我从我的经验中总结如下

1：ajax请求过程绑定beforeSend方法。

2：触发事件时显示loading部分html。完成后再隐藏html

1

2

css代码

/#circle { background-color: rgba(0,0,0,0) border:5px solid rgba(10,10,10,0.9) opacity:.9border-right:5px solid rgba(0,0,0,0)border-left:5px solid rgba(0,0,0,0) border-radius:50pxbox-shadow: 0 0 35px #808080 z-index:1000 width:50pxheight:50px margin:0 auto position:fixedleft:30px bottom:30px -moz-animation:spinPulse 1s infinite ease-in-out -webkit-animation:spinPulse 1s infinite ease-in-out-o-animation:spinPulse 1s infinite ease-in-out -ms-animation:spinPulse 1s infinite ease-in-out}#circle1 { background-color: rgba(0,0,0,0) border:5px solid rgba(20,20,20,0.9) opacity:.9border-left:5px solid rgba(0,0,0,0) border-right:5px solid rgba(0,0,0,0)border-radius:50pxbox-shadow: 0 0 15px #202020 z-index:1000 width:30pxheight:30px margin:0 autoposition:fixedleft:40px bottom:40px -moz-animation:spinoffPulse 1s infinite linear -webkit-animation:spinoffPulse 1s infinite linear -o-animation:spinoffPulse 1s infinite linear -ms-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -moz-transform:rotate(145deg)opacity:1} 100% { -moz-transform:rotate(-320deg)opacity:0}}@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg)} 100% { -moz-transform:rotate(360deg) }}@-webkit-keyframes spinPulse { 0% { -webkit-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -webkit-transform:rotate(145deg)opacity:1} 100% { -webkit-transform:rotate(-320deg)opacity:0}}@-webkit-keyframes spinoffPulse { 0% { -webkit-transform:rotate(0deg)} 100% { -webkit-transform:rotate(360deg)}}@-o-keyframes spinPulse { 0% { -o-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -o-transform:rotate(145deg)opacity:1} 100% { -o-transform:rotate(-320deg)opacity:0}}@-o-keyframes spinoffPulse {0% { -o-transform:rotate(0deg)}100% { -o-transform:rotate(360deg)}}@-ms-keyframes spinPulse { 0% { -ms-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -ms-transform:rotate(145deg)opacity:1} 100% { -ms-transform:rotate(-320deg)opacity:0}}@-ms-keyframes spinoffPulse { 0% { -ms-transform:rotate(0deg)} 100% { -ms-transform:rotate(360deg)}}

1

<div id="circle"></div><div id="circle1"></div>

1

2

3

4

5

6

<script>

jQuery(window).load(function() {

jQuery("#circle").fadeOut(500)

jQuery("#circle1").fadeOut(700)

})

</script>

---