1, hook

import { ElLoading } from "element-plus";
import LoadingSvg from "@/assets/loading.svg";
import type { LoadingInstance } from "element-plus/es/components/loading/src/loading";
import type { LoadingOptions } from "element-plus/es/components/loading/src/types";

export function useLoading() {
  const loadingInstance = ref<LoadingInstance | null>(null);
  const isLoading = ref(false);

  // 开启loading
  const open = (customOptions?: LoadingOptions) => {
    if (!isLoading.value) {
      loadingInstance.value = ElLoading.service({
        fullscreen: true,
        lock: true,
        customClass: "loading-conainer",
        svgViewBox: "0 0 200 200",
        svg: `<image href="${LoadingSvg}" />`,
        ...customOptions,
      });
      isLoading.value = true;
    }
  };

  // 关闭loading
  const close = () => {
    if (isLoading.value && loadingInstance.value) {
      loadingInstance.value.close();
      loadingInstance.value = null;
      isLoading.value = false;
    }
  };

  return {
    isLoading,
    open,
    close,
  };
}

注意

这个只能这样写

svg: `<image href="${LoadingSvg}" />`,

不能写成

svg: `<img src="${LoadingSvg}" />`,

全局css

.loading-conainer {
  display: flex !important;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #0f2027, #203a43, #2c5364) !important;
  opacity: 0.8;
  .circular {
    animation: none !important;
    height: 400px !important;
    width: 400px !important;
  }

  .el-loading-spinner {
    position: unset !important;
    display: flex;
    justify-content: center;
  }
}

我用的svg 没有背景色，所以要设定一个与你的svg图片匹配的背景色

svg

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 蓝色渐变背景 -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a1a3a" />
      <stop offset="100%" stop-color="#1a3a6a" />
    </linearGradient>
    
    <!-- 圆环渐变 -->
    <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00d2ff" />
      <stop offset="50%" stop-color="#3a7bd5" />
      <stop offset="100%" stop-color="#00d2ff" />
    </linearGradient>
    
    <!-- 中心圆渐变 -->
    <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#122b50" />
      <stop offset="100%" stop-color="#1e3c72" />
    </radialGradient>
  </defs>
  
  <!-- 背景 -->
  <!-- <rect width="200" height="200" fill="url(#bgGradient)" /> -->
  
  <!-- 外圈金属环 -->
  <circle cx="100" cy="100" r="85" fill="none" stroke="url(#ringGradient)" stroke-width="4" stroke-dasharray="5,3" opacity="0.8" />
  
  <!-- 旋转外环 - 断开效果 -->
  <g transform="rotate(0, 100, 100)">
    <path d="M100,20 A80,80 0 0,1 180,100 A80,80 0 0,1 100,180 A80,80 0 0,1 20,100 A80,80 0 0,1 100,20" 
          fill="none" stroke="url(#ringGradient)" stroke-width="8" stroke-dasharray="240,60" stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite" />
    </path>
  </g>
  
  <!-- 旋转内环 - 断开效果 -->
  <g transform="rotate(0, 100, 100)">
    <path d="M100,50 A50,50 0 0,1 150,100 A50,50 0 0,1 100,150 A50,50 0 0,1 50,100 A50,50 0 0,1 100,50" 
          fill="none" stroke="url(#ringGradient)" stroke-width="6" stroke-dasharray="160,40" stroke-linecap="round">
      <animateTransform attributeName="transform" type="rotate" from="360 100 100" to="0 100 100" dur="3s" repeatCount="indefinite" />
    </path>
  </g>
  
  <!-- 中心圆 -->
  <circle cx="100" cy="100" r="30" fill="url(#centerGradient)" stroke="#4a90e2" stroke-width="2" />
  <text x="100" y="105" font-family="Arial" font-size="10" text-anchor="middle" fill="#00d2ff" opacity="0.7">
    LOADING
    <animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="1;0.7;1" dur="2s" repeatCount="indefinite" />
  </text>
  
  <!-- 中心点脉冲效果 -->
  
  
  <!-- 扫描线效果 -->
  <line x1="100" y1="20" x2="100" y2="180" stroke="url(#ringGradient)" stroke-width="2" stroke-opacity="0.7">
    <animate attributeName="y1" values="20;180;20" dur="2s" repeatCount="indefinite" />
    <animate attributeName="y2" values="40;200;40" dur="2s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="0;0.7;0" dur="2s" repeatCount="indefinite" />
  </line>
  
  <!-- 发光粒子效果 -->
  <circle cx="70" cy="70" r="2" fill="#00d2ff">
    <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="0s" />
  </circle>
  <circle cx="130" cy="130" r="2" fill="#00d2ff">
    <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" begin="1s" />
  </circle>
    
</svg>