CSS 筆記 - Loader 的使用

過場等待的 loader 非常常使用，為了就是在讓使用者等待時，有個過場特效，不讓使用者以為頁面壞掉或是無聊，這在遊戲介面特別常看到，也讓使用者體驗加分，這次記錄兩個簡單的 loader 的寫法。

起手式

載入非常簡單，官方 GitHub 有完整說明與使用方法，這邊簡單說明一下，

安裝方法

npm

1	npm i --save loaders.css

bower

1	bower install loaders.css

CDN(僅建議練習或開發時使用，正式上線建議下載使用)

css

1	https: //cdnjs.cloudflare.com/ajax/libs/loaders.css/0.1.2/loaders.min.css;

javascript

1	https://cdnjs.cloudflare.com/ajax/libs/loaders.css/0.1.2/loaders.css.js

開始使用 Loader.css

在文件中載入相關的 css/js 之後，只需要加入以下 HTML

1	<div class="loader-inner ball-pulse"></div>

loader-inner 這個 class 本身沒有意義，只是告訴 JavaScript 要使用這個 ball-pulse 的動畫效果，官網上還有更多範例，以此範例來說，每個圖示中的白色小點都是一個 <div> 標籤，在外層的 <div> 裡面還需要塞入三個 <div> 才行，如果是 ball-spin-fade-loader 就要塞入 8 個…

javascript 語法

此套件是一個 jQuery plugin，因此要使用前還需要先載入 jQuery 才行。載入後我們可以加入以下 JavaScript 程式碼，

1	$(".loader-inner").loaders();

這時 loader-inner 就會告訴 JS 抓到這個 class，後啟用 loaders()，這時就看 class 狀況要加入多少個 <div>，若要把 loader-inner 改成 loader-ironman ，只要 JavaScript 跟著變動就可以了。

僅使用 CSS Animation 達到效果的寫法

這是載入套件樣式，結合 @keyframes 的語法，透過 codepen 可以看到在 .loader 的地方加上，

1	animation: closeLoading 3s 1 ease-out forwards;

順序為：

animation-name:closeLoading; //動畫名稱
animation-duration:3s; //持續時間
animation-iteration-count: 1; //動畫播放次數，預設 1。

其他還有 infinite(無限)。
animation-timing-function:ease-out; //動畫加速度函式，預設 ease。

還有： linear、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)。
animation-fill-mode:forwards; //動畫播放前後模式，預設 none。

其他還有 forwards、backwards、both。

animation 一定要搭配 @keyframes 的方式，

@keyframes closeLoading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

搭配 jQuery 完成的寫法

另外這個就是用 JS 的方式控制出現的時間，既然提到時間差，就會想到 setTimeout，所以就加入這段，

//loader 的淡出時間
$(".loader-inner").loaders();
setTimeout(function () {
  $(".loading").fadeOut(600);
}, 1600);

//box 的淡入時間
setTimeout(function () {
  $(".box").fadeIn(800);
}, 2000);

結語

感謝六角學院的學長姐在 slack 的支援!!

提姆寫程式