Home  >  Article  >  Web Front-end  >  A very cool css3 animation jquery.loding waiting to load plug-in

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

高洛峰
高洛峰Original
2016-11-24 09:37:521410browse

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: '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(); 
        } 
    }; 
};
rrree


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn