开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

多种方法实现Loading(加载)动画效果

简介:
+关注继续查看

当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次。

既能让用户知道正在提交中,也能防止二次提交,好处多多呢。

上面的这个圈圈是会滚动的。简单点的话,可以直接用GIF动态图片实现。不过现在已经有了CSS3和HTML5了,多了好几种高大上的实现方式。

这里先来介绍几个动画的在线demo,第一个是HTML5 Boilerplate中的Effeckt.css,第二个是Animate.css

下面一一列出,如果要结合按钮的话,可自行修改下CSS或JS等文件。当要嵌入到实际项目中的时候,可能会改动一些地方,以实际情况为准了。

 

一、PNG图片+CSS3动画

<div class="pull-up pull-up-loading">
  <span class="pull-icon"></span>正在载入中....
</div>
.pull-up-loading .pull-icon {
  background-position: 0 100%;
  /*chrome*/
  -webkit-transform: rotate(0deg) translateZ(0);
  -webkit-transition-duration: 0ms;
  -webkit-animation-name: loading;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
/*chrome*/

@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg) translateZ(0);
  }
  to {
    -webkit-transform: rotate(360deg) translateZ(0);
  }
}

点击查看在线实例:

  1. 只有当加上pull-up-loading,才会出现滚动
  2. 添加一个动画keyframes,叫loading,是在做transform: rotate操作,下面的CSS省略了firefox中的动画代码,为了看的清晰点,实例中有完整的firefox代码

这里有个在线生成Loading的纯CSS代码,cssload.net。样式选择还是挺多的,就是对于老一点的浏览器的兼容性方面不是很强比如IE6、IE7、IE8等。

再来几个不同的款式:点击可查看源码

              

 

二、spin.js

  这是一个脚本文件。不依赖任何库,可以独立执行,挺好用的,我在实际项目中使用过这个插件,当时我把所有的ajax提交都调用了这个插件,结合jQuery库,做到Loading效果和防止二次提交。而且这个库的浏览器兼容性很好,甚至兼容古老的IE6,而且不用引入额外的CSS或图,可配置的参数也很多。

  我粗略的看过代码,标准的浏览器就用脚本写CSS3来做动画,对于古老点的浏览器就用setTimeout来模拟动画。里面还会初始化一个VML标签,这个是针对IE的。

  看代码的时候看到了个很有趣的符号“~~”,后面一查,说是将变量转换成数字的一个方法,挺高级的。

  这个插件还提供了一个在线配置的小网站,点击查看

showAjaxLoading: function(btn) {
    if (btn == null || btn == undefined || $(btn).length == 0) return;
    var left = $(btn).offset().left;
    var top = $(btn).offset().top;
    var width = $(btn).outerWidth();
    var height = $(btn).height();
    var opts = {
      lines: 9, // The number of lines to draw
      length: 0, // The length of each line
      width: 10, // The line thickness
      radius: 15, // The radius of the inner circle
      corners: 1, // Corner roundness (0..1)
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      color: '#000', // #rgb or #rrggbb or array of colors
      speed: 1, // Rounds per second
      trail: 81, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: '50%', // Top position relative to parent
      left: '50%' // Left position relative to parent
    };
    $('#ajax_spin').remove();
    $('body').append('<div id="ajax_spin" style="position:absolute;background:#FFF;filter:alpha(opacity=30);opacity:0.3"><div id="ajax_spin_inner" style="position:relative;height:50px;"></div></div>');
    $('#ajax_spin').css({
      'top': top,
      'left': left,
      'width': width,
      'height': height
    });
    var target = document.getElementById('ajax_spin_inner');
    var spinner = new Spinner(opts).spin(target);
    //return spinner;
  },
  stopAjaxLoading: function() {
    $('#ajax_spin').remove();
    //new Spinner(opts).spin(target)
    //spinner.stop();
  }

 

上面那段代码是我在一个实际项目中写的,就是显示和移除Loading效果,并且在按钮上面覆盖这层效果防止二次提交。

  1. btn就是按钮jQuery对象
  2. left,top找到按钮的左右位移,width和height获取按钮的宽和高,width用的是outerWidth
  3. $('body')加入一个能够覆盖按钮的层
  4. 初始化一个Spinner对象,并加入到那个覆盖层中

 

三、Ladda

可以单独使用,或者结合上面的插件spin一起结合使用。demo页面的效果挺高大上的,但用到实例可能还是需要些修改的。

点击查看主页

下图随便选了几个例子,可以实现不同尺寸的按钮大小,不同方向的滚动,将按钮变成原型,或带进度条的按钮。挺多样性的。

点击查看demo页面

 

HTML代码如下:

<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>
// Automatically trigger the loading animation on click
Ladda.bind( 'input[type=submit]' );

// Same as the above but automatically stops after two seconds
Ladda.bind( 'input[type=submit]', { timeout: 2000 } );

结构看上去不是很复杂,JS脚本的引入也不是很难。不过在引入实际项目中肯定还是需要做些修改的。

相比spin插件,这插件要引入的文件就多了,不但要引入JS还要引入CSS。

  点击查看codepen上复制的代码

  我本来想在codepen页面中,把demo页面重现一次,在把github里面的dist/CSS/ladda.min.css文件复制到codepen中,JS中的ladda.js和spin.js也复制过来。发生了点意外,那个滚动条老是会往下面一点。CSS都是全部复制的,很奇怪。后面发现是CSS的问题,真的是实际应用一下才会看到具体情况。

  

  

  demo页面的CSS:

.ladda-button .ladda-spinner {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: 32px;
  height: 32px;
  top: 50%;
  margin-top: -17px;
  opacity: 0;
  pointer-events: none
}

  Github上的CSS:区别就是margin-top的不一样。

.ladda-button .ladda-spinner {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: 32px;
  height: 32px;
  top: 50%;
  margin-top: 0;
  opacity: 0;
  pointer-events: none
}

 

四、Sonic.js

这个插件是创建一个canvas画布来实现Loaing动画效果。 款式也比较多,如下图所示:点击查看在线demo

在线demo中还展示了用CSS3动画+CSS Sprite技术实现动画

 

点击查看Github主页

对于较老版本的浏览器,sonic也做了处理,能将canvas转换成GIF图片。点击查看SonicGIF

 

    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/4551818.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
最大似然法复原图像-Matlab
最大似然法复原图像-Matlab
49 0
【纹理分割】Matlab实现纹理图像分割
【纹理分割】Matlab实现纹理图像分割
19 0
巧用 CSS 实现动态线条 Loading 动画
巧用 CSS 实现动态线条 Loading 动画
148 0
十种方法实现图像数据集降维
十种方法实现图像数据集降维
184 0
Android属性动画Animator实现卫星Button
动画效果,卫星Button扇形展开和关闭 1. Animator和Animation Animator框架是android4.0之后添加的一个动画框架,和之前的Animation框架相比,Animator可以进行更多和更精细化的动画控制,而且比之前更简单和更高效。
746 0
matlab实现hog特征
%%matlab实现hog特征 %修改自http://www.cnblogs.com/tiandsp/archive/2013/05/24/3097503.html %input: img %output: final_descriptor clear all; close all; clc; %img=double(imread('lena.jpg')); %img=imread('man.png'); img=imread('e:/work/matlab/data/252.jpg'); img=rgb2gray(img); %简单起见,彩图转灰度图。
1061 0
Module切换,如何实现loading效果
Flex里面没有那么麻烦的 复制代码 即可 如何使用代码,Flex里有ModuleManager  import mx.
605 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载