Eine sehr coole CSS3-Animation jquery.loding, die darauf wartet, das Plug-in zu laden

Der Screenshot-Effekt scheint nicht sehr gut zu sein. Sie sollten den Code kopieren und lokal ausführen, um ihn zu erleben. Es ist ein moderner Browser erforderlich, der CSS3 unterstützt. Es gibt nicht viel Code und es sind grundsätzlich keine Kommentare erforderlich. Es ist einfach, das aufzurufen, was Sie brauchen.

[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 = &#39;<table id=&#39; + option.id + &#39; class="loading">&#39; + 
                    &#39;<tr>&#39; + 
                        &#39;<td>&#39; + 
                            &#39;<div class="circle">&#39; + 
                            &#39;</div>&#39; + 
                            &#39;<div class="circle1">&#39; + 
                            &#39;</div>&#39;; 
    if (option.msg) { 
        html += &#39;<div class="msg"><p class="shine">&#39; + option.msg + &#39;</p></div>&#39;; 
    } 
    html += &#39;</td></tr></table>&#39;; www.2cto.com
    var loading = $(html).appendTo(option.parent); 
 
    return { 
        play: function () { 
            $(&#39;.circle,.circle1,.shine&#39;, loading).toggleClass(&#39;stop&#39;); 
        }, 
        pause: function () { 
            $(&#39;.circle,.circle1,.shine&#39;, loading).toggleClass(&#39;stop&#39;); 
        }, 
        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*/