Loader 使用

用於等待時的過場特效，此次是使用

安裝

npm i --save loaders.css

CDN

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

使用

加入以下標籤

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

loader-inner 這個 class 本身沒有意義，只是告訴 JavaScript 要使用這個 ball-pulse 的動畫效果，官網上還有更多範例，以此範例來說，每個圖示中的白色小點都是一個

標籤，在外層的

裡面還需要塞入三個

才行，如果是 ball-spin-fade-loader 就要塞入 8 個…

例如：

Code

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

loader.css 另外提供 loaders.js 可以更方便來使用，不用特別加入多個 <div>，不過使用前還需要先載入 jQuery。載入後，加入

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

就可以產生效果。

範例如下：

Code

html

<div class="loader-inner ball-spin-fade-loader"></div>

css

body {
  background-color: #90caf9;
}

.loader-inner {
  margin: 30px;
}

js

$(function () {
    $(".loader-inner").loaders();
});

搭配 CSS Animation 使用

在 .loading 加上

animation: closeLoading 3s 1 ease-out forwards;

只執行一次，時間為 3 秒的 loader 逐漸模糊效果。

Code

...

.loading {
    background-color: #222;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    animation: closeLoading 3s 1 ease-out forwards;
    .ball-spin-fade-loader {
        position: absolute;
        top: 50%;
        left: 50%;
    }
    @keyframes closeLoading {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 0;
        }
    }
}

...

搭配 jQuery 控制出現時間

使用 setTimeout() 來處理。

Code

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

    // div 淡入
    setTimeout(function () {
        $(".div").fadeIn(800);
    }, 2200);
});

參考：
https://hsuchihting.github.io/css/20200711/1366382220/
完整解析 CSS 動畫