一个很炫的css3动画做的jquery.loding等待加载插件

老规矩，先上图看效果：

截图效果好像不是很好，大家还是复制代码本地运行体验下，需要支持CSS3的现代浏览器。代码不多，基本不用注释了，已封装成jQuery插件模式，调用简单，需要的拿去吧。

/** JQuery loading Plugin* http://blog.csdn.net/sweetsuzyhyf** Licensed same as jquery - MIT License* http://www.opensource.org/licenses/mit-license.php** Author: hyf* Email: 36427561@qq.com* Date: 2012-11-15*/$.loading = function (param) {    var option = $.extend({        id: 'loading',      //唯一标识        parent: 'body',     //父容器        msg: ''             //提示信息    }, param || {});    var obj = {};    var html = '<table id=' + option.id + ' class="loading">' +                    '<tr>' +                        '<td>' +                            '<div class="circle">' +                            '</div>' +                            '<div class="circle1">' +                            '</div>';    if (option.msg) {        html += '<div class="msg"><p class="shine">' + option.msg + '</p></div>';    }    html += '</td></tr></table>';    var loading = $(html).appendTo(option.parent);    return {        play: function () {            $('.circle,.circle1,.shine', loading).toggleClass('stop');        },        pause: function () {            $('.circle,.circle1,.shine', loading).toggleClass('stop');        },        close: function () {            loading.remove();        }    };};

/*加载等待样式*/.loading{    width:100%;    height:100%;    vertical-align:middle;}.loading td{    text-align:center;}.loading .circle {background-color: rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow: 0 0 35px #2187e7;width:50px;height:50px;margin:0 auto;-webkit-animation:spinPulse 1s infinite linear;}.loading .circle1 {background-color: rgba(0,0,0,0);border:5px solid rgba(0,183,229,0.9);opacity:.9;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow: 0 0 15px #2187e7;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-webkit-animation:spinoffPulse 1s infinite linear;}@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }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); }}.loading .stop {-webkit-animation-play-state:paused;}.loading .msg{    display:inline-block;    font-size: 12px;    position:relative;    top:-30px;    color:#ccc;    display:inline-block;}@-webkit-keyframes shine{    0%    {        background-position: top left;    }    100%    {        background-position: top right;    }}.shine{    background: #222 -webkit-gradient(linear, left top, right top, from(#000), to(#000), color-stop(0.5, #fff)) 0 0 no-repeat;    -webkit-background-size: 30% 100%;    color: rgba(48,196,233, 0.3);    -webkit-background-clip: text;    -webkit-animation-name: shine;    -webkit-animation-duration: 2s;    -webkit-animation-iteration-count: infinite;}/*加载等待样式end*/

CSS3动画效果来源于网上，添加了自己的一点想法，查看更多。

1楼ZuoZuoShiquot4天前 22:57

多谢大师

Re: sweetsuzyhyf昨天 11:38

回复ZuoZuoShiquotn谢谢支持:)