spa-loading-template.html

<style>
  #loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    color: rgb(31, 41, 55);

    display: flex;
    align-items: center;
    justify-content: center;

    @media (prefers-color-scheme: dark) {
      background-color: rgb(29, 35, 42);
      color: rgb(166, 173, 186);
    }
  }

  .dark #loader {
    background-color: rgb(29, 35, 42);
    color: rgb(166, 173, 186);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  svg {
    animation: spin 1s linear infinite;
  }
</style>

<div id="loader">
  <p class="sr-only">Loading</p>
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8Z"/>
  </svg>
</div>