svg+css实现带灰色背景的loading加载动画组件

<template>
  <svg
    class="load"
    viewBox="25 25 50 50"
    :style="{ width: loadWidth, height: loadWidth }"
  >
    <circle class="loading_bg" cx="50" cy="50" r="20" fill="none" />
    <circle class="loading" cx="50" cy="50" r="20" fill="none" />
  </svg>
</template>
<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: 18,
    },
  },
  computed: {
    loadWidth() {
      const isNumber = /^\d+$/.test(this.width);
      return isNumber ? `${this.width}px` : this.width;
    },
  },
};
</script>
<style>
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 130, 200;
    stroke-dashoffset: -50;
  }
  100% {
    stroke-dasharray: 130, 200;
    stroke-dashoffset: -125;
  }
}
.loading {
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
  animation: dash 1.5s linear infinite;
}
.loading_bg {
  stroke: var(--loadingBgColor);
  stroke-width: 3;
  fill: none;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.load {
  animation: rotate 1.5s linear infinite;
}
</style>