build-flow.web/apps/web-antdv-next/loading.html

<style data-app-loading="inject-css">
  html {
    /* 与 ant-design-vue/dist/reset.css 一致，避免标题行高跳动 */
    line-height: 1.15;
  }

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f4f7f9;
  }

  .loading.hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: all 0.8s ease-out;
  }

  .dark .loading {
    background: #0d0d10;
  }

  /* BuildFlow 品牌 logo：内联 SVG，保证首屏（JS 未执行前）即可见。 */
  .logo {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 14px 26px rgb(10 132 255 / 22%));
    animation: pulse-ani 1.8s ease-in-out infinite;
  }

  .logo-line {
    stroke-dasharray: 92;
    stroke-dashoffset: 92;
    animation: draw-line 1.8s ease-in-out infinite;
  }

  .logo-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-pop 1.8s ease-in-out infinite;
  }

  .logo-node:nth-of-type(2) {
    animation-delay: 0.12s;
  }

  .logo-node:nth-of-type(3) {
    animation-delay: 0.24s;
  }

  .title {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 600;
    color: rgb(0 0 0 / 85%);
    letter-spacing: 0.5px;
  }

  .dark .title {
    color: #fff;
  }

  @keyframes pulse-ani {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(0.88);
      opacity: 0.65;
    }
  }

  @keyframes draw-line {
    0% {
      stroke-dashoffset: 92;
      opacity: 0.35;
    }
    45%,
    70% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    100% {
      stroke-dashoffset: -92;
      opacity: 0.35;
    }
  }

  @keyframes node-pop {
    0%,
    100% {
      transform: scale(0.86);
      opacity: 0.72;
    }
    45%,
    70% {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>
<div class="loading" id="__app-loading__">
  <!-- BuildFlow 流程标识（内联，首屏零依赖可见） -->
  <svg id="buildflow-flow-mark" class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" role="img" aria-label="BuildFlow">
    <defs>
      <linearGradient id="buildflow-loading-bg" x1="8" y1="7" x2="56" y2="58" gradientUnits="userSpaceOnUse">
        <stop stop-color="#0A84FF" />
        <stop offset="0.56" stop-color="#14B8A6" />
        <stop offset="1" stop-color="#111827" />
      </linearGradient>
      <linearGradient id="buildflow-loading-line" x1="15" y1="20" x2="49" y2="44" gradientUnits="userSpaceOnUse">
        <stop stop-color="#E0F2FE" />
        <stop offset="1" stop-color="#FFFFFF" />
      </linearGradient>
    </defs>
    <rect width="64" height="64" rx="16" fill="url(#buildflow-loading-bg)" />
    <path d="M12 47C20.5 53.5 36.5 54.5 51 44.5C58.2 39.5 59.4 29.8 54.8 22.6C49.5 14.4 38.6 10.9 28.3 13.1C18.5 15.2 10.5 22.1 9.8 31.3C9.3 37.7 8.5 44.3 12 47Z" fill="#FFFFFF" opacity="0.09" />
    <path class="logo-line" d="M18 22H30C34.4 22 36.6 27.3 33.5 30.4L30.4 33.5C28.8 35.1 29.9 38 32.2 38H46" stroke="url(#buildflow-loading-line)" stroke-width="4.4" stroke-linecap="round" stroke-linejoin="round" />
    <path class="logo-line" d="M41 32L47 38L41 44" stroke="#FFFFFF" stroke-width="4.4" stroke-linecap="round" stroke-linejoin="round" />
    <rect id="buildflow-node-start" class="logo-node" x="13" y="17" width="13" height="13" rx="4" fill="#FFFFFF" />
    <rect x="16.4" y="20.4" width="6.2" height="6.2" rx="1.6" fill="#0A84FF" />
    <rect id="buildflow-node-middle" class="logo-node" x="24.5" y="27.5" width="15" height="15" rx="5" fill="#FFFFFF" />
    <path d="M29 35H35" stroke="#14B8A6" stroke-width="2.8" stroke-linecap="round" />
    <path d="M32 32V38" stroke="#14B8A6" stroke-width="2.8" stroke-linecap="round" />
    <rect id="buildflow-node-finish" class="logo-node" x="43" y="33" width="11" height="11" rx="3.5" fill="#FFFFFF" />
    <path d="M46.5 38.8L48.2 40.5L51.1 36.7" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
  <div class="title">%VITE_APP_TITLE%</div>
</div>