在前端專案開發中，經常用到loading載入提示功能。今天就給大家分享2個超不錯的Vue載入微調器元件。

1、Epic-Spinners

一系列精美的 vue+css3 花樣動畫載入效果集合元件。star高達3.3K+。

安裝

$ npm i epic-spinners -S

使用元件

優秀的產品總有它獨特之處，針對react和angular，也有相應的版本。

react版本

https://github.com/bondz/react-epic-spinners

angular版本

https://github.com/hackafro/angular-epic-spinners

如果覺得還可以的話，不要錯過哈~

# demo地址/file/2020/08/18/20200818045236_1605.jpg 例項應用/file/2020/08/18/20200818045237_1606.jpg 倉庫地址https://github.com/epicmaxco/epic-spinners

2、Vue-Element-Loading

一個基於vue.js的元素loading載入效果元件。

安裝

$ npm i vue-element-loading -S

使用元件

<template> <div class="parent"> <vue-element-loading :active="show" spinner="bar-fade-scale" color="#ff6600" /> <p>This is my content.</p> </div></template><script> import VueElementLoading from 'vue-element-loading' export default { components: { VueElementLoading } }</script>

目前帶有8個載入微調器

全屏設定

<vue-element-loading :active="show" is-full-screen />

設定提示語及樣式

<vue-element-loading :active="show" spinner="bar-fade-scale" text="Please textStyle={fontSize: '25px'} wait..." />

大小及動畫速度設定

# 示例地址/file/2020/08/18/20200818045239_1607.jpg 倉庫地址https://github.com/biigpongsatorn/vue-element-loading

ok，就分享到這裡。如果大家有其它Vue載入器，歡迎一起交流討論！