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>
像下面这样来调用插件。
<script> $(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: '' }); } }); </script>
配置参数
下面是该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>