Home > Article > Web Front-end > A very cool css3 animation jquery.loding waiting to load plug-in
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 = '<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(); } }; };rrree