一個很炫的css3動畫做的jquery.loding等待載入外掛程式

效果好像不是很好，大家還是複製代碼本地運行體驗下，需要支援CSS3的現代瀏覽器。代碼不多，基本不用注釋了，已封裝成jQuery外掛程式模式，調用簡單，需要的拿去吧。

[javascript] /** 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>'; www.2cto.com    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();         }     }; };

[css] /*載入等待樣式*/ .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*/

