waitMe 轻量级 Web 加载动画插件
waitMe 是一款 jQuery 和 CSS3 超酷 loading 加载动画特效插件。该 loading 加载动画特效使用 CSS3 制作了 14 种不同的 loading 动画效果，并且你还可以使用图片作为 loading 动画。
使用方法
使用该loading加载插件首先要引入jQuery和waitMe.js和waitMe.css文件。
<link rel="stylesheet" href="css/waitMe.css">
<script src='js/jquery.js'></script>
<script src='js/waitMe.js'></script>
初始化 loading 插件
在你需要使用 loading 效果的容器上调用下面的方法来初始化该插件。
$(container).waitMe({param1 : value1, param2 : value2, ...});
例如使用一个按钮来触发 loading 效果。
<button type="button" id="demo">Submit</button>
像下面这样来调用插件。
$(function(){
// none, bounce, rotateplane, stretch, orbit,
// roundBounce, win8, win8_linear or ios
var current_effect = 'bounce'; //
$('#demo').click(function(){
run_waitMe(current_effect);
});
function run_waitMe(effect){
$('#SELECTOR').waitMe({
//none, rotateplane, stretch, orbit, roundBounce, win8,
//win8_linear, ios, facebook, rotation, timer, pulse,
//progressBar, bouncePulse or img
effect: 'bounce',
//place text under the effect (string).
text: '',
//background for container (string).
bg: 'rgba(255,255,255,0.7)',
//color for background animation and text (string).
color: '#000',
//change width for elem animation (string).
sizeW: '',
//change height for elem animation (string).
sizeH: '',
// url to image
source: ''
});
}
});配置参数
下面是该loading加载动画插件的配置参数：
- effect ：动画效果（String）。可用值有：
'bounce'(默认值),none,rotateplane,stretch,orbit,roundBounce,win8,win8_linear,ios,facebook,rotation,timer,pulse,progressBar,bouncePulse,img - text ：loading效果下面的显示文本（String）。
- bg ：容器的背景颜色（String）。如：
'rgba(255,255,255,0.7)'。可以使用颜色和图片。 - color ：loading和文本的颜色（String）。
- sizeW ：改变loading动画元素的宽度（String）。例如：
40px，默认为空字符串。 - sizeH ：改变loading动画元素的高度（String）。例如：
40px，默认为空字符串。 - source ：图片的URL（String）。默认为空字符串。该属性和
effect: 'img'一起使用。
方法
要关闭loading加载动画，可以使用：
$(container).waitMe("hide");
hide 为关闭和隐藏Loading动画。
注意事项
对于 sizeW 和 sizeH 属性，各种效果默认的尺寸如下：
- bounce ：sizeW: '20px', sizeH: '20px'
- rotateplane ：sizeW: '30px', sizeH: '30px'
- stretch ：sizeW: '8px', sizeH: '60px'
- orbit ：sizeW: '40px', sizeH: '40px'
- roundBounce ：sizeW: '60px', sizeH: '60px'
- win8 ：sizeW: '40px', sizeH: '40px'
- win8_linear ：sizeW: '150px', sizeH: '6px'
- ios ：sizeW: '40px', sizeH: '40px'
- facebook ：sizeW: '6px', sizeH: '25px'
- rotation ：sizeW: '60px', sizeH: '60px'
- timer ：sizeW: '40px', sizeH: '40px'
- pulse ：sizeW: '30px', sizeH: '30px'
- progressbar ：sizeW: '200px', sizeH: '20px'
- bouncePulse ：sizeW: '20px', sizeH: '20px'
注意不要使用非块级元素来作为容器，例如 table、input 和 textarea 等元素。可以使用 div、span 和 body 等元素（使用 html 元素和使用 body 元素效果是一样的）。
在页面初始化时调用 loading 效果
可以使用下面的HTML结构来在页面加载时调用该Loading加载动画插件。
<body class="waitMe_body">
<div class="waitMe_container progress" style="background:#fff">
<div style="background:#000"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container working" style="background:#fff">
<div style="background:#000"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container img" style="background:#fff">
<div style="background:url('img.png')"></div>
</div>
</body>
<body class="waitMe_body">
<div class="waitMe_container text" style="background:#fff">
<div style="color:#000">Loading</div>
</div>
</body>相关链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论