6 個可降低跳出率的 Vue Loader 動畫庫

英文 | https://learnvue.co/2020/02/6-vue-loader-animation-libraries-to-reduce-your-bounce-rate/

翻譯 | 小愛

沒有人喜歡等待加載。看看谷歌 2017 年的資料，就可以找到相關的加載時間和跳出率。

阻止人們離開你網站的一種方法是添加視覺回報，以便他們知道事情隻是在加載而不是損壞。它還吸引了人們的注意力，是以等待時間似乎比靜态螢幕要短得多。 

無論是包含微調動畫還是添加實際進度條，提供漂亮的視覺元素都可以提高你網站的性能（并使通路者更快樂）。

對于 Vue 開發人員來說幸運的是，你可以在幾分鐘内将大量驚人的加載程式庫添加到你的項目中。 

在本文中，我們将分享6個我個人比較喜歡的動畫庫。 

準備好了嗎？我們開始吧。

1、Vue 簡單微調器

GitHub位址：https://dzwillia.github.io/vue-simple-spinner/examples/

顧名思義，這是一個非常簡單的元件，但它非常強大。Vue Simple Spinner 提供了一個可定制的微調元素。使用 props，我們可以控制我們的微調器：

• 尺寸
• 背景色和前景色
• 速度
• 标簽文字
• 更多…

隻需幾行，我們就可以在我們的項目中添加一個微調器。首先，我們可以在指令行中安裝庫npm install vue-simple-spinner --save.

然後，我們将它導入到我們的元件中，在我們的模闆中聲明它，并可以很容易的更改我們想要的任何prop。

<template>
   <vue-simple-spinner size="medium" />
</template>
<script>
import VueSimpleSpinner from 'vue-simple-spinner'
export default {
   components: { 
      VueSimpleSpinner
   }
}      

就像那樣，我們應該有我們的第一個微調器。

2. Vue 徑向進度

GitHub位址：https://github.com/wyzantinc/vue-radial-progress

如果你正在尋找實際的進度條而不是微調動畫，Vue Radial Progress 是一個很棒的庫。 

Vue Radial Progress 允許你設定進度條中的步驟數以及使用者目前所在的步驟。然後，它會根據完成的多少來填充進度條的百分比。

憑借流暢的動畫、可自定義的功能和基于 SVG 的填充系統，當你擁有具有多個離散步驟的異步過程時，該庫非常強大。 

實施起來也是輕而易舉的。 

首先，隻需使用npm install --save vue-radial-progress. 然後，這是文檔中的示例元件。

如你所見，主要prop大小、完成的步驟和步驟總數，非常簡單。

此外，該庫使用元件槽使在圓内添加文本變得簡單。

<template>
  <radial-progress-bar :diameter="200"
                       :completed-steps="completedSteps"
                       :total-steps="totalSteps">
   <p>Total steps: {{ totalSteps }}</p>
   <p>Completed steps: {{ completedSteps }}</p>
  </radial-progress-bar>
</template>


<script>
import RadialProgressBar from 'vue-radial-progress'


export default {
  data () {
    return {
      completedSteps: 0,
      totalSteps: 10
    }
  },


  components: {
    RadialProgressBar
  }
}
</script>      

3、Vue加載疊加

GitHub位址：https://github.com/ankurk91/vue-loading-overlay

Vue Loading Overlay 是全屏加載元件的完美解決方案。例如，如果你的應用程式包含某種儀表闆，并且你想等到所有資料都加載完畢，直到讓使用者單擊滑鼠，這個庫可能會很有用。 

我覺得這個庫的一大特點是你可以允許使用者在點選時取消加載覆寫。這将關閉覆寫并觸發一個事件，你可以使用該事件取消正在運作的任何任務。 

通過添加此功能，你可以讓使用者自行決定何時加載和退出任務時間過長。這意味着他們不必離開頁面。 

要将其添加到你的項目中，請運作 npm install --save vue-loading-overlay。

接下來，這是一個使用 Vue Loading Overlay 庫的示例元件。我們的元件需要一些道具來确定可見性、處理取消和更改顯示。

<template>
    <div class="vld-parent">
        <loading :active.sync="isLoading" 
        :can-cancel="true" 
        :on-cancel="onCancel"
        :is-full-page="fullPage"></loading>


        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">fetch Data</button>
    </div>
</template>


<script>
    // Import component
    import Loading from 'vue-loading-overlay';
    // Import stylesheet
    import 'vue-loading-overlay/dist/vue-loading.css';


    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                  this.isLoading = false
                },5000)
            },
            onCancel() {
              console.log('User cancelled the loader.')
            }
        }
    }
</script>      

4、Vue 進度路徑

GitHub位址：https://github.com/Akryum/vue-progress-path

Vue Progress Path 是最流行的加載器庫之一。由 Vue Core 團隊成員 Guillaume Chau 建構，這是我最喜歡使用的工具之一。

使用 SVG，Vue Progress path 建立了成形的進度條。它帶有幾個内置形狀，但最強大的功能是能夠上傳你自己的 SVG 形狀——這意味着可能性是無限的。 

将其添加到你的項目中npm i --save vue-progress-path，然後将其全局添加到你的 src/main.js檔案中。

import 'vue-progress-path/dist/vue-progress-path.css'
import VueProgress from 'vue-progress-path'


Vue.use(VueProgress, {
  // defaultShape: 'circle',
})      

現在，讓我們看看如何向我們的元件添加進度路徑。

<loading-progress
  :progress="progress"
  :indeterminate="indeterminate"
  :counter-clockwise="counterClockwise"
  :hide-background="hideBackground"
  shape="semicircle"
  size="64"
/>      

這個庫的另一個令人驚奇的地方是它很容易定制。不必強迫你處理prop來自定義外觀，你隻需編寫 CSS 代碼來編輯樣式即可。 

.vue-progress-path path {
  stroke-width: 12;
}


.vue-progress-path .progress {
  stroke: red;
}      

5、Vue 加載按鈕

GitHub位址：https://github.com/shwilliam/vue-loading-button

Vue加載按鈕是一種簡單而有效的方式，可以向使用者顯示正在加載的内容。 

它所做的隻是在單擊按鈕時向按鈕添加微調動畫。但是通過流暢的動畫，它可以建立無縫的外觀，讓你的網站流行起來。

設定起來非常快。 

首先，使用 npm install --save vue-loading-button。然後，你可以像文檔中的這個示例一樣輕松入門。

<template>
   <VueLoadingButton aria-label='Send message' />
</template>
<script>
import VueLoadingButton from 'vue-loading-button'


export default {
  components: {
    VueLoadingButton,
  }
}
</script>      

簡而言之，你所要做的就是根據情況将加載值設定為 true/false。你還可以添加自定義樣式以使其适合你的應用程式。

6、 TB Skeleton

GitHub位址：https://github.com/anthinkingcoder/tb-skeleton

TBSkeleton是提供速度錯覺的好方法。

Linkedin 的這個螢幕截圖就是一個很好的TBSkeleton加載示例。

TBSkeleton 是在 Vue 項目中實作此功能的好方法。但是，它需要大量代碼，并且需要你明智地規劃元素。 

建立架構時，你基本上必須在唯一的TBSkeleton元素中建立不同元素的所有輪廓。 

我認為了解這一點的最好方法就是通過一個例子。 

首先，使用npm install --save tb-skeleton. 然後，src/main.js使用這些行将其添加到你的 Vue 項目檔案中。 

import skeleton from 'tb-skeleton'
import  'tb-skeleton/dist/skeleton.css'
Vue.use(skeleton)      

然後，這裡有一個來自 TBSkeleton 文檔的骨架元件示例。

<template>
  <div>
    <skeleton :theme="opacity" :shape="radius" :bg-color="#dcdbdc">
     <tb-skeleton  width="30%" :aspect-ratio="1"  :shape="circle" bg-color="#eee"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
     <tb-skeleton  width="30%" :aspect-ratio=".3"></tb-skeleton>
   </skeleton>
  </div>
</template>
<script>
  import {TbSkeleton,Skeleton} from 'tb-skeleton'
  export default {
    components: {
      TbSkeleton,
      Skeleton
    }
  }
</script>      

如你所見，如果你将其添加到更複雜的元件中，肯定需要付出一些努力，但我認為這絕對值得付出努力。 

總結

這些隻是你可以在項目中使用的數十種出色的 Vue 加載器庫中的一小部分。如果你想了解更多資訊，我絕對建議你檢視awesome-vue Github 存儲庫（位址：https://github.com/vuejs/awesome-vue）。 

如果你沒有找到适合你需求的任何東西，請自行建構并分享它！我相信其他人也會發現你的分享對他有幫助。 

感謝你的閱讀，祝程式設計愉快！

學習更多技能

請點選下方公衆号

​