Vue3加载中（Spin）

置顶 theMuseCatcher

已于 2024-07-01 16:35:59 修改

阅读量2.4k

点赞数 2

分类专栏： Vue3 less ts 文章标签： vue typescript less

于 2023-04-06 15:39:32 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/129989730

版权

Vue3 同时被 3 个专栏收录

72 篇文章 8 订阅

订阅专栏

69 篇文章 4 订阅

订阅专栏

less

67 篇文章 3 订阅

订阅专栏

Vue2加载中（Spin）

可自定义设置以下属性：

是否为加载中状态（spinning），类型：boolean，默认 true
组件大小（size），类型：'small'|'default'|'large'，默认 'default'
描述文案（tip），类型：string，默认 ''
加载指示符（indicator），类型：'dot'|'spin-dot'|'spin-line'|'quarter-circle'|'half-circle'|'three-quarter-circle'|'dynamic-circle'|'magic-ring'，默认 'dot'
主题颜色（color），类型：string，默认 '#1677FF'
内环颜色（ringColor），仅当 indicator: 'magic-ring' 时生效，类型：string，默认 '#4096FF'
spin-dot 或 spin-line 初始是否旋转（rotate），类型：boolean，默认：false，仅当 indicator: spin-dot | spin-line 时生效
spin-dot 或 spin-line 渐变旋转的动画速度（speed），类型：number，单位ms，默认 600，仅当 indicator: spin-dot | spin-line 时生效

效果如下图：在线预览

①创建加载中组件Spin.vue：

<script setup lang="ts">
interface Props {
  spinning?: boolean // 是否为加载中状态
  size?: 'small' | 'default' | 'large' // 组件大小
  tip?: string // 描述文案
  indicator?:
    | 'dot'
    | 'spin-dot'
    | 'spin-line'
    | 'quarter-circle'
    | 'half-circle'
    | 'three-quarters-circle'
    | 'dynamic-circle'
    | 'magic-ring' // 加载指示符
  color?: string // 主题颜色，当 indicator: 'magic-ring' 时为外环颜色
  ringColor?: string // 内环颜色，仅当 indicator: 'magic-ring' 时生效
  rotate?: boolean // spin-dot 或 spin-line 初始是否旋转，仅当 indicator: spin-dot | spin-line 时生效
  speed?: number // spin-dot 或 spin-line 渐变旋转的动画速度，单位ms，仅当 indicator: spin-dot | spin-line 时生效
}
withDefaults(defineProps<Props>(), {
  spinning: true,
  size: 'default',
  tip: undefined,
  indicator: 'dot',
  color: '#1677FF',
  ringColor: '#4096FF',
  rotate: false,
  speed: 600
})
</script>
<template>
  <div
    :class="`m-spin-wrap spin-${size}`"
    :style="`--color: ${color}; --ring-color: ${ringColor}; --speed: ${speed}ms;`"
  >
    <div class="m-spin" v-show="spinning">
      <div class="m-spin-box">
        <div class="m-loading-dot" v-if="indicator === 'dot'">
          <span class="u-dot-item"></span>
          <span class="u-dot-item"></span>
          <span class="u-dot-item"></span>
          <span class="u-dot-item"></span>
        </div>
        <div class="spin-wrap-box" :class="{ 'spin-wrap-rotate': rotate }" v-if="indicator === 'spin-dot'">
          <div class="m-spin-dot">
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
          </div>
          <div class="m-spin-dot spin-rotate" :class="{ 'spin-tip': tip }">
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
          </div>
        </div>
        <div class="spin-wrap-box" :class="{ 'spin-wrap-rotate': rotate }" v-if="indicator === 'spin-line'">
          <div class="m-spin-line">
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
          </div>
          <div class="m-spin-line spin-rotate" :class="{ 'spin-tip': tip }">
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
            <span class="u-spin-item"></span>
          </div>
        </div>
        <div v-if="indicator === 'quarter-circle'" class="u-quarter-circle"></div>
        <div v-if="indicator === 'half-circle'" class="u-half-circle"></div>
        <div v-if="indicator === 'three-quarters-circle'" class="u-three-quarters-circle"></div>
        <div v-if="indicator === 'dynamic-circle'" class="m-dynamic-circle">
          <svg class="circular" viewBox="0 0 50 50">
            <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
          </svg>
        </div>
        <div v-if="indicator === 'magic-ring'" class="m-magic-ring">
          <div class="m-outer-ring"></div>
          <div class="u-inner-ring"></div>
        </div>
        <p class="u-tip" v-show="tip">{{ tip }}</p>
      </div>
    </div>
    <div :class="['m-spin-content', { 'm-spin-mask': spinning }]">
      <slot></slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
.m-spin-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  .m-spin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9;
    .m-spin-box {
      text-align: center;
      line-height: 0;
      .m-loading-dot {
        position: relative;
        display: inline-block;
        transform: rotate(45deg);
        animation: loading-dot 1.2s infinite linear;
        -webkit-animation: loading-dot 1.2s infinite linear;
        @keyframes loading-dot {
          100% {
            transform: rotate(405deg);
          } // to { transform: rotate(405deg); }
        }
        .u-dot-item {
          // 单个圆点样式
          position: absolute;
          background: var(--color);
          border-radius: 50%;
          opacity: 0.3;
          animation: loading-dot-color 1s linear infinite alternate;
          -webkit-animation: loading-dot-color 1s linear infinite alternate;
          @keyframes loading-dot-color {
            100% {
              opacity: 1;
            }
          }
        }
        .u-dot-item:first-child {
          top: 0;
          left: 0;
        }
        .u-dot-item:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: 0.4s;
          -webkit-animation-delay: 0.4s;
        }
        .u-dot-item:nth-child(3) {
          bottom: 0;
          right: 0;
          animation-delay: 0.8s;
          -webkit-animation-delay: 0.8s;
        }
        .u-dot-item:last-child {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
          -webkit-animation-delay: 1.2s;
        }
      }
      .spin-wrap-rotate {
        animation: spin-rotate 2.4s ease-in-out;
        -webkit-animation: spin-rotate 2.4s ease-in-out;
        @keyframes spin-rotate {
          100% {
            transform: rotate(360deg);
          } // to { transform: rotate(360deg); }
        }
      }
      .spin-wrap-box {
        text-align: center;
        line-height: 0;
        position: relative;
        .m-spin-dot {
          position: relative;
          display: inline-block;
          .u-spin-item {
            position: absolute;
            background: var(--color);
            border-radius: 50%;
          }
          .u-spin-item:first-child {
            top: 0;
            left: 0;
            opacity: 0.3;
            animation: spin-color-1 var(--speed) linear infinite;
            -webkit-animation: spin-color-1 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(2) {
            top: 0;
            right: 0;
            opacity: 0.5;
            animation: spin-color-3 var(--speed) linear infinite;
            -webkit-animation: spin-color-3 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(3) {
            bottom: 0;
            right: 0;
            opacity: 0.7;
            animation: spin-color-5 var(--speed) linear infinite;
            -webkit-animation: spin-color-5 var(--speed) linear infinite;
          }
          .u-spin-item:last-child {
            bottom: 0;
            left: 0;
            opacity: 0.9;
            animation: spin-color-7 var(--speed) linear infinite;
            -webkit-animation: spin-color-7 var(--speed) linear infinite;
          }
        }
        .m-spin-line {
          position: relative;
          display: inline-block;
          .u-spin-item {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--color);
          }
          .u-spin-item:first-child {
            opacity: 0.3;
            animation: spin-color-1 var(--speed) linear infinite;
            -webkit-animation: spin-color-1 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(2) {
            opacity: 0.5;
            transform: translateX(-50%) rotate(90deg);
            animation: spin-color-3 var(--speed) linear infinite;
            -webkit-animation: spin-color-3 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(3) {
            opacity: 0.7;
            transform: translateX(-50%) rotate(180deg);
            animation: spin-color-5 var(--speed) linear infinite;
            -webkit-animation: spin-color-5 var(--speed) linear infinite;
          }
          .u-spin-item:last-child {
            opacity: 0.9;
            transform: translateX(-50%) rotate(270deg);
            animation: spin-color-7 var(--speed) linear infinite;
            -webkit-animation: spin-color-7 var(--speed) linear infinite;
          }
        }
        .spin-rotate {
          position: absolute;
          left: 0;
          transform: rotate(45deg);
          .u-spin-item:first-child {
            opacity: 0.4;
            animation: spin-color-2 var(--speed) linear infinite;
            -webkit-animation: spin-color-2 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(2) {
            opacity: 0.6;
            animation: spin-color-4 var(--speed) linear infinite;
            -webkit-animation: spin-color-4 var(--speed) linear infinite;
          }
          .u-spin-item:nth-child(3) {
            opacity: 0.8;
            animation: spin-color-6 var(--speed) linear infinite;
            -webkit-animation: spin-color-6 var(--speed) linear infinite;
          }
          .u-spin-item:last-child {
            opacity: 1;
            animation: spin-color-8 var(--speed) linear infinite;
            -webkit-animation: spin-color-8 var(--speed) linear infinite;
          }
        }
        .spin-tip {
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
        }
        @keyframes spin-color-1 {
          0% {
            opacity: 0.3;
          }
          14.3% {
            opacity: 1;
          }
          100% {
            opacity: 0.4;
          }
        }
        @keyframes spin-color-2 {
          0% {
            opacity: 0.4;
          }
          14.3% {
            opacity: 0.3;
          }
          28.6% {
            opacity: 1;
          }
          100% {
            opacity: 0.5;
          }
        }
        @keyframes spin-color-3 {
          0% {
            opacity: 0.5;
          }
          28.6% {
            opacity: 0.3;
          }
          42.8% {
            opacity: 1;
          }
          100% {
            opacity: 0.6;
          }
        }
        @keyframes spin-color-4 {
          0% {
            opacity: 0.6;
          }
          42.8% {
            opacity: 0.3;
          }
          57.1% {
            opacity: 1;
          }
          100% {
            opacity: 0.7;
          }
        }
        @keyframes spin-color-5 {
          0% {
            opacity: 0.7;
          }
          57.1% {
            opacity: 0.3;
          }
          71.4% {
            opacity: 1;
          }
          100% {
            opacity: 0.8;
          }
        }
        @keyframes spin-color-6 {
          0% {
            opacity: 0.8;
          }
          71.4% {
            opacity: 0.3;
          }
          85.7% {
            opacity: 1;
          }
          100% {
            opacity: 0.9;
          }
        }
        @keyframes spin-color-7 {
          0% {
            opacity: 0.9;
          }
          85.7% {
            opacity: 0.3;
          }
          100% {
            opacity: 1;
          }
        }
        @keyframes spin-color-8 {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0.3;
          }
        }
      }
      .u-quarter-circle {
        display: inline-block;
        border-radius: 50%;
        border-style: solid;
        border-color: transparent;
        border-top-color: var(--color); // 显示上1/4圆
        animation: loading-circle 1s infinite linear;
        -webkit-animation: loading-circle 1s infinite linear;
      }
      .u-half-circle {
        display: inline-block;
        border-radius: 50%;
        border-style: solid;
        border-color: transparent;
        border-top-color: var(--color); // 显示上1/4圆
        border-right-color: var(--color); // 显示右1/4圆
        animation: loading-circle 1s infinite linear;
        -webkit-animation: loading-circle 1s infinite linear;
      }
      .u-three-quarters-circle {
        display: inline-block;
        border-radius: 50%;
        border-style: solid;
        border-color: var(--color);
        border-top-color: transparent; // 隐藏1/4圆
        animation: loading-circle 1s infinite linear;
        -webkit-animation: loading-circle 1s infinite linear;
      }
      @keyframes loading-circle {
        100% {
          transform: rotate(360deg);
        }
      }
      .m-dynamic-circle {
        display: inline-block;
        .circular {
          display: inline-block;
          animation: loading-rotate 2s linear infinite;
          -webkit-animation: loading-rotate 2s linear infinite;
          @keyframes loading-rotate {
            100% {
              transform: rotate(360deg);
            }
          }
          .path {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: 0;
            stroke: var(--color);
            stroke-linecap: round;
            animation: loading-dash 1.5s ease-in-out infinite;
            -webkit-animation: loading-dash 1.5s ease-in-out infinite;
            @keyframes loading-dash {
              0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
              }
              50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -40px;
              }
              100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -120px;
              }
            }
          }
        }
      }
      .m-magic-ring {
        display: inline-block;
        position: relative;
        transform: rotate(45deg);
        animation: spin-rotate 2.5s linear infinite;
        -webkit-animation: spin-rotate 2.5s linear infinite;
        @keyframes spin-rotate {
          100% {
            transform: rotate(405deg);
          }
        }
        .m-outer-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-style: solid;
          border-color: var(--color);
          border-radius: 50%;
          animation: spin-outer-ring 1.5s linear infinite;
          -webkit-animation: spin-outer-ring 1.5s linear infinite;
          @keyframes spin-outer-ring {
            0% {
              transform: rotateY(0deg);
            }
            100% {
              transform: rotateY(360deg);
            }
          }
        }
        .u-inner-ring {
          position: absolute;
          border-style: solid;
          border-color: var(--ring-color);
          border-radius: 50%;
          animation: spin-inner-ring 1.5s linear infinite;
          -webkit-animation: spin-inner-ring 1.5s linear infinite;
          @keyframes spin-inner-ring {
            0% {
              transform: rotateY(45deg);
            }
            100% {
              transform: rotateY(405deg);
            }
          }
        }
      }
      .u-tip {
        color: var(--color);
        text-align: center;
      }
    }
  }
  .m-spin-content {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
  }
  .m-spin-mask {
    user-select: none;
    pointer-events: none;
    opacity: 0.5;
  }
}
.spin-small {
  .m-spin .m-spin-box {
    .m-loading-dot {
      width: 20px;
      height: 20px;
      .u-dot-item {
        width: 8px;
        height: 8px;
      }
    }
    .m-spin-dot {
      width: 20px;
      height: 20px;
      .u-spin-item {
        width: 6px;
        height: 6px;
      }
    }
    .m-spin-line {
      --line-length: 8px;
      width: calc(var(--line-length) * 3);
      height: calc(var(--line-length) * 3);
      .u-spin-item {
        transform-origin: 50% calc(var(--line-length) * 1.5);
        border-radius: var(--line-length);
        width: calc(var(--line-length) / 2.5);
        height: var(--line-length);
      }
    }
    .u-quarter-circle {
      width: 24px;
      height: 24px;
      border-width: 3px;
    }
    .u-half-circle {
      width: 24px;
      height: 24px;
      border-width: 3px;
    }
    .u-three-quarters-circle {
      width: 24px;
      height: 24px;
      border-width: 3px;
    }
    .m-dynamic-circle {
      width: 26px;
      height: 26px;
      .circular .path {
        stroke-width: 5;
      }
    }
    .m-magic-ring {
      width: 24px;
      height: 24px;
      .m-outer-ring,
      .u-inner-ring {
        border-width: 3px;
      }
      .u-inner-ring {
        top: 3px;
        left: 3px;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
      }
    }
    .u-tip {
      font-size: 14px;
      font-weight: 400;
      line-height: 16px;
      margin-top: 6px;
    }
  }
}
.spin-default {
  .m-spin .m-spin-box {
    .m-loading-dot {
      width: 30px;
      height: 30px;
      .u-dot-item {
        width: 11px;
        height: 11px;
      }
    }
    .m-spin-dot {
      width: 30px;
      height: 30px;
      .u-spin-item {
        width: 9px;
        height: 9px;
      }
    }
    .m-spin-line {
      --line-length: 12px;
      width: calc(var(--line-length) * 3);
      height: calc(var(--line-length) * 3);
      .u-spin-item {
        transform-origin: 50% calc(var(--line-length) * 1.5);
        border-radius: var(--line-length);
        width: calc(var(--line-length) / 3);
        height: var(--line-length);
      }
    }
    .u-quarter-circle {
      width: 36px;
      height: 36px;
      border-width: 4px;
    }
    .u-half-circle {
      width: 36px;
      height: 36px;
      border-width: 4px;
    }
    .u-three-quarters-circle {
      width: 36px;
      height: 36px;
      border-width: 4px;
    }
    .m-dynamic-circle {
      width: 38px;
      height: 38px;
      .circular .path {
        stroke-width: 5;
      }
    }
    .m-magic-ring {
      width: 36px;
      height: 36px;
      .m-outer-ring,
      .u-inner-ring {
        border-width: 5px;
      }
      .u-inner-ring {
        top: 5px;
        left: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
      }
    }
    .u-tip {
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      margin-top: 10px;
    }
  }
}
.spin-large {
  .m-spin .m-spin-box {
    .m-loading-dot {
      width: 40px;
      height: 40px;
      .u-dot-item {
        width: 15px;
        height: 15px;
      }
    }
    .m-spin-dot {
      width: 40px;
      height: 40px;
      .u-spin-item {
        width: 12px;
        height: 12px;
      }
    }
    .m-spin-line {
      --line-length: 16px;
      width: calc(var(--line-length) * 3);
      height: calc(var(--line-length) * 3);
      .u-spin-item {
        transform-origin: 50% calc(var(--line-length) * 1.5);
        border-radius: var(--line-length);
        width: calc(var(--line-length) / 3);
        height: var(--line-length);
      }
    }
    .u-quarter-circle {
      width: 48px;
      height: 48px;
      border-width: 6px;
    }
    .u-half-circle {
      width: 48px;
      height: 48px;
      border-width: 6px;
    }
    .u-three-quarters-circle {
      width: 48px;
      height: 48px;
      border-width: 6px;
    }
    .m-dynamic-circle {
      width: 50px;
      height: 50px;
      .circular .path {
        stroke-width: 7;
      }
    }
    .m-magic-ring {
      width: 48px;
      height: 48px;
      .m-outer-ring,
      .u-inner-ring {
        border-width: 7px;
      }
      .u-inner-ring {
        top: 7px;
        left: 7px;
        width: calc(100% - 14px);
        height: calc(100% - 14px);
      }
    }
    .u-tip {
      font-size: 16px;
      font-weight: 500;
      line-height: 20px;
      margin-top: 14px;
    }
  }
}
</style>

②在要使用的页面引入：

<script setup lang="ts">
import Spin from './Spin.vue'
import { ref } from 'vue'
const spinning = ref(true)
</script>
<template>
  <div>
    <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
    <h2 class="mt30 mb10">基本使用</h2>
    <Flex align="center"> Loading state:<Switch v-model:checked="spinning" /> </Flex>
    <br />
    <Spin style="width: 800px" :spinning="spinning">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">旋转的点</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="spin-dot">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">旋转的线</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="spin-line">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">四分之一圆形指示符</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="quarter-circle">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">二分之一圆形指示符</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="half-circle">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">四分之三圆形指示符</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="three-quarters-circle">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">动态圆形指示符</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="dynamic-circle">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">魔法圆环指示符</h2>
    <Spin style="width: 800px" :spinning="spinning" indicator="magic-ring">
      <p class="spin-content">
        当 spinning 为 false 时，不显示 loading 状态；当 spinning 为 true 时，显示 loading 效果；如果不设置 tip
        描述文案时，则只有 loading 效果水平垂直居中；如果设置了 tip 描述文案，则 loading 效果和 tip
        描述文案一起水平垂直居中。
      </p>
    </Spin>
    <h2 class="mt30 mb10">自定义描述文案</h2>
    <Space>
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="spin-dot" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="spin-line" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="quarter-circle" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="half-circle" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="three-quarters-circle" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="dynamic-circle" />
      <Spin class="u-spin" tip="加载中..." :spinning="spinning" indicator="magic-ring" />
    </Space>
    <h2 class="mt30 mb10">自定义颜色</h2>
    <Space>
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="spin-dot" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="spin-line" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="quarter-circle" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="half-circle" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="three-quarters-circle" />
      <Spin class="u-spin" color="#fadb14" :spinning="spinning" indicator="dynamic-circle" />
      <Spin class="u-spin" color="#fadb14" ring-color="#ffe58f" :spinning="spinning" indicator="magic-ring" />
    </Space>
    <h2 class="mt30 mb10">各种大小</h2>
    <Space direction="vertical">
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" />
        <Spin class="u-spin" :spinning="spinning" size="default" />
        <Spin class="u-spin" :spinning="spinning" size="large" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="spin-dot" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="spin-dot" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="spin-dot" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="spin-line" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="spin-line" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="spin-line" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="quarter-circle" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="quarter-circle" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="quarter-circle" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="half-circle" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="half-circle" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="half-circle" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="three-quarters-circle" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="three-quarters-circle" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="three-quarters-circle" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="dynamic-circle" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="dynamic-circle" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="dynamic-circle" />
      </Space>
      <Space>
        <Spin class="u-spin" :spinning="spinning" size="small" indicator="magic-ring" />
        <Spin class="u-spin" :spinning="spinning" size="default" indicator="magic-ring" />
        <Spin class="u-spin" :spinning="spinning" size="large" indicator="magic-ring" />
      </Space>
    </Space>
  </div>
</template>
<style lang="less" scoped>
.spin-content {
  display: inline-block;
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
.u-spin {
  width: 100px;
  height: 100px;
}
</style>