waitMe 轻量级 Web 加载动画插件 - 文章教程

waitMe 轻量级 Web 加载动画插件

发布于 2020-05-27 字数 5703 浏览 1532 评论 0

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

waitMe 轻量级 Web 加载动画插件

使用方法

使用该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动画。

注意事项

对于 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>

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

nuj316

文章 0 评论 0

梦中楼上月下

文章 2 评论 0

kook

文章 0 评论 0

thousandcents

文章 0 评论 0

像你

文章 1 评论 0