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

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

老规矩，先上图看效果：

截图效果好像不是很好，大家还是复制代码本地运行体验下，需要支持CSS3的现代浏览器。代码不多，基本不用注释了，已封装成jQuery插件模式，调用简单，需要的拿去吧一个很炫的css3卡通做的jquery.loding等待加载插件。

/*
* 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>';
    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();
        }
    };
};

/*加载等待样式*/
.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*/

CSS3动画效果来源于网上，添加了自己的一点想法，查看更多。

1楼ZuoZuoShiquot4天前 22:57: 多谢大师

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

相关推荐