标签：
之前通过Ajax请求加载数据的时候，在数据还没有呈现出来前，为了更好的用户体验，总会弄个loading告诉用户其实内容正在加载，而不是网站崩了。但是貌似之前使用gif图片的情况比较多，可能是为了兼容各个浏览器，但是CSS3已经很强大到我们可以自己使用动画写出一个loading效果出来，然后再通过调用JQuery的ajaxStart()和ajaxStop()这两个事件处理函数，就可以实现我们想要的loading效果了。
这里主要介绍一个CSS3 loading的网站：http://cssload.net/ ，通过使用这个网站，我们可以通过几步就轻松地使用CSS3完成我们想要的loading效果，然后一键获得代码：
比如，在这里我选择了这样一个效果，然后点击GET CODE 按钮，就可以得到代码：
#fountainG{ position:relative; margin:10% auto; width:240px; height:29px} .fountainG{ position:absolute; top:0; background-color:#33cc99; width:29px; height:29px; -webkit-animation:bounce_fountainG 1.3s infinite normal; -moz-animation:bounce_fountainG 1.3s infinite normal; -o-animation:bounce_fountainG 1.3s infinite normal; -ms-animation:bounce_fountainG 1.3s infinite normal; animation:bounce_fountainG 1.3s infinite normal; -moz-transform:scale(.3); -webkit-transform:scale(.3); -ms-transform:scale(.3); -o-transform:scale(.3); transform:scale(.3); border-radius:19px; } #fountainG_1{ left:0; -moz-animation-delay:0.52s; -webkit-animation-delay:0.52s; -ms-animation-delay:0.52s; -o-animation-delay:0.52s; animation-delay:0.52s; } #fountainG_2{ left:30px; -moz-animation-delay:0.65s; -webkit-animation-delay:0.65s; -ms-animation-delay:0.65s; -o-animation-delay:0.65s; animation-delay:0.65s; } #fountainG_3{ left:60px; -moz-animation-delay:0.78s; -webkit-animation-delay:0.78s; -ms-animation-delay:0.78s; -o-animation-delay:0.78s; animation-delay:0.78s; } #fountainG_4{ left:90px; -moz-animation-delay:0.91s; -webkit-animation-delay:0.91s; -ms-animation-delay:0.91s; -o-animation-delay:0.91s; animation-delay:0.91s; } #fountainG_5{ left:120px; -moz-animation-delay:1.04s; -webkit-animation-delay:1.04s; -ms-animation-delay:1.04s; -o-animation-delay:1.04s; animation-delay:1.04s; } #fountainG_6{ left:150px; -moz-animation-delay:1.17s; -webkit-animation-delay:1.17s; -ms-animation-delay:1.17s; -o-animation-delay:1.17s; animation-delay:1.17s; } #fountainG_7{ left:180px; -moz-animation-delay:1.3s; -webkit-animation-delay:1.3s; -ms-animation-delay:1.3s; -o-animation-delay:1.3s; animation-delay:1.3s; } #fountainG_8{ left:210px; -moz-animation-delay:1.43s; -webkit-animation-delay:1.43s; -ms-animation-delay:1.43s; -o-animation-delay:1.43s; animation-delay:1.43s; } @-moz-keyframes bounce_fountainG{ 0%{ -moz-transform:scale(1); background-color:#33cc99; } 100%{ -moz-transform:scale(.3); background-color:#0099cc; } } @-webkit-keyframes bounce_fountainG{ 0%{ -webkit-transform:scale(1); background-color:#33cc99; } 100%{ -webkit-transform:scale(.3); background-color:#0099cc; } } @-ms-keyframes bounce_fountainG{ 0%{ -ms-transform:scale(1); background-color:#33cc99; } 100%{ -ms-transform:scale(.3); background-color:#0099cc; } } @-o-keyframes bounce_fountainG{ 0%{ -o-transform:scale(1); background-color:#33cc99; } 100%{ -o-transform:scale(.3); background-color:#0099cc; } } @keyframes bounce_fountainG{ 0%{ transform:scale(1); background-color:#33cc99; } 100%{ transform:scale(.3); background-color:#0099cc; } }
同时也包含html结构：
<div id="fountainG"> <div id="fountainG_1" class="fountainG"> </div> <div id="fountainG_2" class="fountainG"> </div> <div id="fountainG_3" class="fountainG"> </div> <div id="fountainG_4" class="fountainG"> </div> <div id="fountainG_5" class="fountainG"> </div> <div id="fountainG_6" class="fountainG"> </div> <div id="fountainG_7" class="fountainG"> </div> <div id="fountainG_8" class="fountainG"> </div> </div>
最后，将html结构放在比如文章列表或者其他需要Ajax请求加载的地方，然后使用JQuery来实现最终的效果：
function loadingEffect() { var loading = $(‘#fountainG‘); loading.hide(); $(document).ajaxStart(function () { loading.show(); }).ajaxStop(function () { loading.hide(); }); } loadingEffect();
这样就完成了，具体喜欢哪个loading效果，该网站提供了十几种效果，已经够用了。当然如果你觉得这些效果很简单，也完全可以自己写出来，但对于我这种菜鸟，直接拿来用确实挺方便，效率高，而且还可以读一下源码，给自己一些想法。最后，CSS3实现loading效果确实挺nice，但如果要兼容浏览器的话，最好使用渐进增强方法来实现，确保低版本依旧可以使用gif图片代替。
标签：
原文地址：http://www.cnblogs.com/jr1993/p/4446682.html
