A very cool css3 animation jquery.loding waiting to load plug-in-CSS Tutorial-php.cn

A very cool css3 animation jquery.loding waiting to load plug-in

高洛峰

Release： 2016-11-24 09:37:52

Original

1480 people have browsed it

The screenshot effect does not seem to be very good. You should copy the code and run it locally to experience it. A modern browser that supports CSS3 is required. There is not much code, and there is basically no need for comments. It has been encapsulated into jQuery plug-in mode. It is simple to call. Take what you need.

[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(); 
        } 
    }; 
};

Copy after login

rrree