vue svg制作loading组件

制作一个loading组件，颜色，大小等内容都可以根据需求去修改
组件完整代码：

<template>
    <div class="container">
        <svg :width="width" :height="height" viewBox="0, 0, 80, 80" preserveAspectRatio="xMinYMid meet">
          <circle
                cx="40"
                cy="40"
                r="35"
                fill="none"
                :stroke="outsideColor"
                stroke-width="4"
                stroke-dasharray="147"
                :stroke-linecap="lineCap"
          >
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    values="0 40 40; 360 40 40"
                    :dur="`${+duration}s`"
                    repeatCount="indefinite"
                >

                </animateTransform>
                <animate
                    attributeName="stroke"
                    :values="outChange"
                    :dur="`${+duration * 2}s`"
                    repeatCount="indefinite"
                >
                </animate>
          </circle>
          <circle 
                cx="40"
                cy="40"
                r="25"
                fill="none"
                stroke="insideColor"
                stroke-width="4"
                stroke-dasharray="105"
                :stroke-linecap="lineCap"
          >
            <animateTransform
                attributeName="transform"
                type="rotate"
                values="360 40 40; 0 40 40"
                :dur="`${+duration}s`"
                repeatCount="indefinite"
            >
            </animateTransform>
            <animate
                attributeName="stroke"
                :values="inChange"
                :dur="`${+duration * 2}s`"
                repeatCount="indefinite"
            >
            </animate>
          </circle>
          <circle 
                cx="40"
                cy="40"
                r="15"
                fill="none"
                stroke="insideColor"
                stroke-width="4"
                stroke-dasharray="60"
                :stroke-linecap="lineCap"
          >
            <animateTransform
                attributeName="transform"
                type="rotate"
                values="0 40 40; 360 40 40"
                :dur="`${duration}s`"
                repeatCount="indefinite"
            >
            </animateTransform>
            <animate
                attributeName="stroke"
                :values="outChange"
                :dur="`${+duration * 2}s`"
                repeatCount="indefinite"
            >
            </animate>
          </circle>
      </svg>
      <div class="loading-content">  <!--显示加载的文字啊什么的-->
          <slot></slot>
      </div>
    </div>
</template>

<script>
export default {
    name: 'loading',
    props:{
        width:{
            type:[Number, String],
            default: 400
        },
        height:{
            type: [Number, String],
            default: 400
        },
        outsideColor:{
            type: String,
            default: "#3be6cd"
        },
        insideColor:{
            type: String,
            default: "#02bcfe"
        },
        duration:{
            type: [Number, String],
            default: 2
        },
        lineCap:{   //半圆两边闭合方式，默认为方形
            type: String,
            default: "square"
        }
    },
    data() {
        return {

        }
    },
    computed:{
        outChange(){
            return `${this.outsideColor}; ${this.insideColor}; ${this.outsideColor}`
        },
        inChange(){
            return `${this.insideColor}; ${this.outsideColor}; ${this.insideColor}`
        }
    }
}
</script>

<style lang="stylus" scoped>
    .container
       position absolute
       left 0
       top 0
       right 0
       bottom 0
       width 100%
       height 100%
       display flex
       justify-content center
       align-items center
       flex-direction column
       svg 
            margin-bottom 20px
</style>

在页面中使用时
一、引入loading组件，并进行注册
二、使用loading组件，并根据需求传入自定义参数

import svgLoading from "@/components/svgAnimation/loading"

 components: {  svgLoading },

<svg-loading
        :outsideColor="'#20B2AA'"
        :insideColor="'#00CED1'"
        :duration="1.5"
        :width="100"
        :height="100"
        :lineCap="'round'"
        v-if="loading"
      >
      <div style="font-size:16px;color:yellow;">
          数据加载中...
      </div>
      </svg-loading>