A very flashy CSS3 animated jquery.loding waiting to be loaded plugin

The effect seems to be not very good, everyone or copy code local run experience, need to support CSS3 modern browser. The code is not much, basically do not comment, has been encapsulated into the jquery plug-in mode, call simple, need to take it.

[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 ',//uniquely identifies parent: ' body ',//parent container msg: '//Cue message}, 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> '; www.2cto.com 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 (); }     }; };

[CSS]/* Load wait style */. 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; }/* Load wait style end*/

