jQuery和CSS3超酷loading加载动画特效-爱编程

jQuery和CSS3超酷loading加载动画特效

来源：htmleaf 阅读：11 时间：2018-02-04 01:26

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>

在线预览源码下载