4 款酷炫的 vue 的加载中组件（Loading）

在不使用 UI 组件库开发 vue 项目的时候，我们需要一些 loading 效果，比如全局加载，局部加载，按钮加载中等等。本文整理了 4 款高性能简单易用的 vue 加载中组件，入手简单，赶紧用起来。

Vue Loading Overlay Component

Vue Loading Overlay Component 是一款轻量级的 Loading 组件，可以快速实现一款全屏加载效果，当然也可以实现父元素的加载效果，支持 vue2，vue3。不过该组件有一个缺点就是只有三款 loading 样式，不允许自定义 loading 图标。

我们看 vue3 的使用方法

import { defineComponent, ref, inject } from "vue";
import { useLoading } from "vue-loading-overlay";

export default defineComponent({
  setup() {
    const $loading = useLoading();
    // or use inject without importing useLoading
    // const $loading =  inject('$loading')
    const fullPage = ref(false);
    const submit = () => {
      const loader = $loading.show({
        // Optional parameters
      });
      // simulate AJAX
      setTimeout(() => {
        loader.hide();
      }, 5000);
    };

    return {
      fullPage,
      submit,
    };
  },
});

具体效果可以点击查看 demo

Epic Spinners

第一款 vue loading 组件可能会有些许单调，你可以试试这款 Epic Spinners 组件，提供了 20 款 loading 图标。可以点击查看效果。

Epic Spinners

vue-radial-progress

一款 vue 的环形进度组件，可定制渐变和动画效果以及粗细。使用比较简单，直接点击查看效果

vue-radial-progress

使用起来也是非常简单，只需要引入对应的 loading 组件即可。

<flower-spinner :animation-duration="2500" :size="70" :color="'#ff1d5e'" />
<pixel-spinner :animation-duration="2000" :pixel-size="70" :color="'#ff1d5e'" />

Vue Ultimate Skeleton Cards

Vue Ultimate Skeleton Cards（或简称 VUSC）是一个很酷的 VueJS 可定制的骨架屏生成插件。它为您提供了两种方法来定义适合您需要的骨架卡。这些卡片具有独特的加载动画，与您迄今为止看到的传统骨架卡片不同。这些卡片中有更多引人注目的效果来吸引用户。

VUSC 提供了两款组件来实现骨架屏。

SkeletonCard 是内置了几款简单的骨架屏组件，包括圆形，矩形，按钮等。

<SkeletonCard primary="crimson" structure="12333" animDisable />

structure 对应数字的映射表，查看官网配置映射

如果你想完全定制化，可以使用 SkeletonScaffold 组件。

<SkeletonScaffold primary="teal">
  <div v-mSquare style="border-radius: 100%" />
  <br />
  <div v-mBox v-mDark style="height: 1.5em" />
  <div v-mBox v-mDark style="height: 1.5em" />
  <div v-mBox style="height: 1.3em; width: 60%" />
</SkeletonScaffold>