shalu-velofex/apps/web-velofex-b/loading.html

<style data-app-loading="inject-css">
  html {
    /* same as antdv-next/dist/reset.css setting, avoid the title line-height changed */
    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;

    /* transition: all 0.8s ease-out; */
  }

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

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

  .title {
    margin-top: 28px;
    font-size: 28px;
    font-weight: 600;
    color: #890145;
    animation: breath 2s ease-in-out infinite;
  }

  .dark .title {
    color: #fff;
  }

  .loader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 120px;
    isolation: isolate;
  }

  .dark .loader::before {
    background: rgb(187 48 118 / 34%);
  }

  .loader-logo {
    position: relative;
    z-index: 1;
    width: 132px;
    height: auto;
    transform-origin: 50% 78%;
    animation: logo-float 1.6s ease-in-out infinite;
  }

  .logo-main {
    fill: #890145;
    animation: logo-accent-glow 2s ease-in-out infinite;
  }

  .logo-accent {
    fill: #bb3076;
    animation: logo-accent-glow 1.6s ease-in-out infinite;
  }

  .logo-velocity path {
    animation: logo-velocity-flicker 1.6s ease-in-out infinite;
  }

  .logo-velocity path:nth-child(1) {
    animation-delay: 0.06s;
  }

  .logo-velocity path:nth-child(2) {
    animation-delay: 0.12s;
  }

  .logo-velocity path:nth-child(3) {
    animation-delay: 0.18s;
  }

  .logo-velocity path:nth-child(4) {
    animation-delay: 0.24s;
  }

  @keyframes logo-float {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }

    50% {
      transform: translateY(-8px) scale(1.01);
    }
  }

  @keyframes logo-accent-glow {
    0%,
    100% {
      opacity: 0.74;
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes logo-velocity-flicker {
    0%,
    100% {
      opacity: 0.45;
    }

    35% {
      opacity: 1;
    }

    70% {
      opacity: 0.6;
    }
  }

  @keyframes logo-shadow {
    0%,
    100% {
      opacity: 0.38;
      transform: translateX(-50%) scale(0.86);
    }

    50% {
      opacity: 0.6;
      transform: translateX(-50%) scale(1.08);
    }
  }

  @keyframes breath {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.55;
    }
  }
</style>
<div class="loading" id="__app-loading__">
  <div class="loader" aria-hidden="true">
    <svg
      class="loader-logo"
      xmlns="http://www.w3.org/2000/svg"
      width="39.172"
      height="29.156"
      viewBox="0 0 39.172 29.156"
    >
      <g transform="translate(-92 -20)">
        <g transform="translate(94.396 28.479)">
          <path
            class="logo-main"
            d="M269,248.893c.486-1.269.739-4.331-3.115-4.331H256.8a4.2,4.2,0,0,0-3.489,1.71s-4.482,6.845-6.516,9.554a9.046,9.046,0,0,1-5.068,3.547,11.581,11.581,0,0,0,2.549,0,8.75,8.75,0,0,0,6.779-3.546l4.716-7.143a2.25,2.25,0,0,1,1.874-1.046h4.221c1.787,0,2.124,1.386,1.414,2.856-.272.564-.565,1.218-.93,1.933a20.46,20.46,0,0,1-17.9,10.782c-6.317.067-10.731-2.39-11.96-3.528,2.138,3.191,6.565,5.367,12.323,5.541,7.732.234,12.686-1.754,17.719-6.4.283-.261.57-.553.856-.864.054-.053.109-.1.162-.161a19.512,19.512,0,0,0,1.665-2.088,28.1,28.1,0,0,0,2.505-4.1A25.677,25.677,0,0,0,269,248.893"
            transform="translate(-232.493 -244.562)"
          />
          <path
            class="logo-main"
            d="M692.321,385.119c-1.479,2.219-3.514,5.229-4.707,6.818a9.046,9.046,0,0,1-5.068,3.547,11.575,11.575,0,0,0,2.549,0,8.75,8.75,0,0,0,6.779-3.546l4.5-6.819Z"
            transform="translate(-666.943 -380.246)"
          />
        </g>
        <g class="logo-velocity" transform="translate(92 20)">
          <path
            class="logo-accent"
            d="M440.868,250.02c-.563-2.036-1.118-4.041-1.706-6.173h5.858Z"
            transform="translate(-429.601 -235.393)"
          />
          <path
            class="logo-accent"
            d="M813.639,172.63h-2.682l1.54-2.085h2.682Z"
            transform="translate(-788.505 -164.632)"
          />
          <path
            class="logo-accent"
            d="M796.315,128.571h-1.939l1.168-1.508h1.939Z"
            transform="translate(-772.499 -122.658)"
          />
          <path
            class="logo-accent"
            d="M918.191,106.665H916.6l.993-1.237h1.591Z"
            transform="translate(-890.486 -101.773)"
          />
          <path
            class="logo-accent"
            d="M186.81,2.038c6.8-.044,10.685,2.112,12.569,3.876C197.246,2.606,192.4.267,186.447.024c-9.854-.4-18.267,4.584-22.02,12.3-1.5,3.094-1.119,6.388-.5,7.533,1.275,2.583,3.371,3.129,6.044,3.3a9.938,9.938,0,0,0,7.969-3.645c1.179-1.468,2.15-3.034,3.2-4.563C182.494,12.969,186,7.868,186,7.868l-1.847,0-.744.978h-1.452l.743-.977-1.627.008s-6.008,9.087-7.616,10.412c-2.17,1.787-5.093,1.069-4.861-2.2l0,0c.674-7.554,8.648-13.991,18.215-14.053"
            transform="translate(-163.38 -0.002)"
          />
        </g>
      </g>
    </svg>
  </div>
  <div class="title"><%= VITE_APP_TITLE %>-易码工坊</div>
</div>