iot-device-management-frontend/apps/web-antd/loading.html

<style data-app-loading="inject-css">
  html {
    /* same as ant-design-vue/dist/reset.css setting */
    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;
  }

  .title {
    margin-top: 24px;
    font-family:
      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
      Arial, sans-serif !important;
    font-size: 24px;
    font-weight: 600 !important;
    color: rgb(0 0 0 / 85%) !important;
  }

  .dark .title {
    color: #fff !important;
  }

  #__app-loading-lottie__ {
    width: 220px;
    height: 220px;
  }
</style>
<div class="loading" id="__app-loading__">
  <div id="__app-loading-lottie__"></div>
  <div class="title"><%= VITE_APP_TITLE %></div>
</div>
<script src="/lottie_light.min.js"></script>
<script src="/lottie-tint.js"></script>
<script>
  (function () {
    var container = document.getElementById('__app-loading-lottie__');
    if (!container || typeof lottie === 'undefined' || !window.__lottieTint) return;
    var tint = window.__lottieTint;
    fetch('/loading.json')
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var shades = tint.buildShades(tint.readPrimary());
        lottie.loadAnimation({
          container: container,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: tint.patchColors(data, shades),
        });
      })
      .catch(function (e) { console.error('[app-loading] lottie error', e); });
  })();
</script>