<!doctype html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <title><%= getPascalCase(name) %>Dev</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>

  <div class="spinner">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <script>
    var Spinner = {
      target: document.querySelector('.spinner'),
      start: function () {
        document.body.appendChild(this.target);
      },
      done: function () {
        if (this.target.parentElement) {
          this.target.parentElement.removeChild(this.target);
        }
      }
    };
  </script>

  <style>
    .spinner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      backdrop-filter: blur(1px);
      animation: spinner-enter 0.2s ease 0.3s 1 forwards;
    }

    .spinner>div {
      width: 10px;
      height: 10px;
      margin: 0 4px;
      background-color: #108ee9;
      border-radius: 50%;
      animation: spinner-bounce-effect 1.4s infinite ease-in-out both;
    }

    .spinner>div:nth-child(1) {
      animation-delay: -0.32s;
    }

    .spinner>div:nth-child(2) {
      animation-delay: -0.16s;
    }

    @keyframes spinner-enter {

      0% {
        opacity: 1;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes spinner-bounce-effect {

      0%,
      80%,
      100% {
        transform: scale(0);
      }

      40% {
        transform: scale(1.0);
      }
    }
  </style>
</body>

</html>
