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

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和CSS3超酷loading加载动画特效
jQuery和CSS3超酷loading加载动画特效
分享:

    插件介绍

    waitMe是一款jQuery和CSS3超酷loading加载动画特效插件。该loading加载动画特效使用CSS3制作了14种不同的loading动画效果,并且你还可以使用图片作为loading动画。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-06
    阅读:
简要教程

waitMe是一款jQueryCSS3超酷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动画。

注意事项

对于sizeWsizeH属性,各种效果默认的尺寸如下:

  • 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'

注意不要使用非块级元素来作为容器,例如tableinputtextarea等元素。可以使用divspanbody等元素(使用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>