多種方法實現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