一个很炫的css3动画做的jquery.loding等待加载插件-css教程-PHP中文网

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

高洛峰

发布： 2016-11-24 09:37:52

原创

1459 人浏览过

截图效果好像不是很好，大家还是复制代码本地运行体验下，需要支持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: &#39;loading&#39;,      //唯一标识 
        parent: &#39;body&#39;,     //父容器 
        msg: &#39;&#39;             //提示信息 
 
    }, 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*/

登录后复制