[JS] 轉頁Loading動畫

前言

此方式需要用到turbolinks

補充： 如只需要上方progress bar，可直接使用 gem “nprogress-rails” 也很方便

選好喜歡的Loading圖

http://tobiasahlin.com/spinkit/

這邊使用其中一項當範例

加入CSS，請確保application.scss有載入 ```css assets/spinner.css .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; font-weight: bold; display:none; }

.spinner > div { background-coålor: #555; height: 100%; width: 6px; display: inline-block;

-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }

.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }

.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } }

@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

加入Javascript，請確保application.js有載入

turbolink-class 請輸入:
```js
// [path] asssets/javascripts/spinner.js
$(document).on('page:fetch', function() {
  $(".spinner").show();
});

$(document).on('page:receive', function() {
  $(".spinner").hide();
});

turbolink 5 請輸入:

// [path] asssets/javascripts/spinner.js
$(document).on('turbolinks:request-start', function() {
  $(".spinner").show();
});

$(document).on('turbolinks:request-end', function() {
  $(".spinner").hide();
});

再將Loading畫面放入template

<!-- [path] views/layouts/application.htm.erb -->
<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
  LOADING..
</div>

#附註 turbolinks 5和Class對應表可以參考 http://qiita.com/jkr_2255/items/fe1e69e043c94a5c0a79

參考

1. https://codediode.io/lessons/8736-loading-spinners-in-rails#1-spinner-css
2. http://tobiasahlin.com/spinkit/
3. http://www.ajaxload.info/
4. http://qiita.com/jkr_2255/items/fe1e69e043c94a5c0a79