d-loading.html

<template id="d-loading">
  <style>
    .loader {
      width: 2em;
      height: 2em;
      margin: -0.2em 0 0 -0.2em;
      border: 0.3em solid rgba(0, 0, 0, 0.1);
      border-left: 0.3em solid #555;
      border-radius: 50%;
      transform: translateZ(0);
      transition: all 500ms ease;
      animation: loader 300ms infinite linear;

    }
    .curtain {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 100%;
      height: 100%;
      /* background-color: white; */
      background: #f5f5d5;
      transition: all 600ms ease;
    }
    @keyframes loader {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <div class="curtain">
    <div class="loader"></div>
  </div>
</template>