index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Carbon Vue3</title>
    <style>
      .loading-spinner {
        animation: rotate 4.5s linear infinite;
      }
      @keyframes rotate {
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div style="display: grid; justify-content: space-around">
        <h3>Loading...</h3>
      </div>
      <div class="loading-spinner">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          style="
            margin: auto;
            background: transparent;
            display: block;
            width: 25%;
          "
          viewBox="0 0 100 100"
          preserveAspectRatio="xMidYMid"
        >
          <g transform="translate(50 50)">
            <g>
              <path
                d="M29.895651857753492 -2.5 L46.89565185775349 -2.5 L46.89565185775349 2.5 L29.895651857753492 2.5 A30 30 0 0 1 22.907185109576073 19.371651203643335 L22.907185109576073 19.371651203643335 L34.92800038974738 31.392466483814644 L31.392466483814644 34.92800038974738 L19.371651203643335 22.907185109576073 A30 30 0 0 1 2.500000000000002 29.895651857753492 L2.500000000000002 29.895651857753492 L2.500000000000003 46.89565185775349 L-2.499999999999998 46.89565185775349 L-2.4999999999999987 29.895651857753492 A30 30 0 0 1 -19.371651203643335 22.907185109576076 L-19.371651203643335 22.907185109576076 L-31.39246648381464 34.92800038974739 L-34.928000389747375 31.39246648381465 L-22.90718510957607 19.37165120364334 A30 30 0 0 1 -29.895651857753492 2.500000000000004 L-29.895651857753492 2.500000000000004 L-46.89565185775349 2.500000000000006 L-46.89565185775349 -2.4999999999999942 L-29.895651857753496 -2.4999999999999964 A30 30 0 0 1 -22.907185109576076 -19.37165120364333 L-22.907185109576076 -19.37165120364333 L-34.92800038974739 -31.392466483814637 L-31.39246648381466 -34.92800038974737 L-19.371651203643346 -22.907185109576062 A30 30 0 0 1 -2.499999999999993 -29.895651857753496 L-2.499999999999993 -29.895651857753496 L-2.499999999999996 -46.89565185775349 L2.4999999999999782 -46.89565185775349 L2.4999999999999813 -29.895651857753496 A30 30 0 0 1 19.371651203643342 -22.90718510957607 L19.371651203643342 -22.90718510957607 L31.392466483814648 -34.92800038974738 L34.92800038974737 -31.39246648381466 L22.90718510957606 -19.37165120364335 A30 30 0 0 1 29.895651857753496 -2.4999999999999947 M0 -24A24 24 0 1 0 0 24 A24 24 0 1 0 0 -24"
                fill="#8a3ffc"
              ></path>
            </g>
          </g>
        </svg>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>