怎麼讓 vue-loading-overlay 更改樣式?│鼠年全馬鐵人挑戰 #20

vue-loading-overlay 套件

npm vue-loading-overlay
cdn vue-loading-overlay

loading 樣式

loading.io

因為使用 codepen 練習，所以使用 cdn 來載入 vue-loading-overlay 套件。

JS

https://cdn.jsdelivr.net/npm/vue-loading-overlay@3.4.0/dist/vue-loading.min.js

CSS

https://cdn.jsdelivr.net/npm/vue-loading-overlay@3.3.2/dist/vue-loading.css

註冊元件

Vue.component('loading', VueLoading);

Use as Component

<loading :active.sync="isLoading"></loading>

開啟 loading

// 全域註冊元件
Vue.component('loading', VueLoading);
new Vue({
  el: '#app',
  data:{
    // 預設 : 開啟 loading
    isLoading: true,
  },
});

預設 Loading DEMO

加入樣式與方法

樣式可以到 loading.io 選擇

選一個喜歡的 loading 樣式，在 download 那邊按下 CSS

複製裡面的內容

樣式包進 loading 元件內

<loading :active.sync="isLoading">
<!--     樣式包進 loading 元件內     -->
        <div class="loadingio-spinner-ripple-wu44vrvts1">
          <div class="ldio-2gn8nvj94zp">
            <div></div>
            <div></div>
          </div>
        </div>
<!--     樣式包進 loading 元件內     -->        
 </loading>

樣式的 CSS

@keyframes ldio-2gn8nvj94zp {
  0% {
    top: 96px;
    left: 96px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 18px;
    left: 18px;
    width: 156px;
    height: 156px;
    opacity: 0;
  }
}
.ldio-2gn8nvj94zp div {
  position: absolute;
  border-width: 4px;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: ldio-2gn8nvj94zp 1s cubic-bezier(0,0.2,0.8,1) infinite;
}
.ldio-2gn8nvj94zp div:nth-child(1) {
  border-color: #1d3f72
}
.ldio-2gn8nvj94zp div:nth-child(2) {
  border-color: #5699d2;
  animation-delay: -0.5s;
}
.loadingio-spinner-ripple-wu44vrvts1 {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
/*  background 設定 none  */
  background: none;
}
.ldio-2gn8nvj94zp {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-2gn8nvj94zp div { box-sizing: content-box; }
/* generated by https://loading.io/ */

方法

按下 Click Me 按鈕後啟動 loading ，並在 7 秒後結束

Vue.component('loading', VueLoading);
new Vue({
  el: '#app',
  data:{
    // 預設 : 關閉 loading
    isLoading: false,
  },
  methods:{
    clickMe() {
      // click 按鈕後開啟 loading
      this.isLoading = true;
      setTimeout(() => {
        // 7 秒後結束 loading
        this.isLoading = false;
      },7000);
    }
  }
});

Loading 更改樣式 DEMO