//- .loader
//-   .isometric
//-     .box
//-     .box
//-     .box
//-     .box
//-   h1 Загрузка
//-     span ...
  
ui-loader

// body {
//  display: grid;
//  place-items: center;
//  height: 100vh;
//  background-color: #fff;
// }

// .isometric {
//  --size: 40px;
//  position: relative;
//  transform: rotateX(55deg) rotateZ(-45deg);
//  margin-bottom: calc(3 * var(--size));
//  .box {
//    position: absolute;
//    width: var(--size);
//    height: var(--size);
//    background: #f9ae57;
//    animation: slide 1s cubic-bezier(.1,.1,.65,1) infinite;
//    &::before,
//    &::after {
//      position: absolute;
//      width: 100%;
//      height: 100%;
//      content: '';
//    }
//    &::before {
//      background: #C742F6;
//      transform: skew(0deg, -45deg);
//      right: 100%;
//      top: 50%;
//    }
//    &::after {
//      background: #E97012;
//      transform: skew(-45deg, 0deg);
//      top: 100%;
//      right: 50%;
//    }
//  }
//  .box:nth-child(1) {
//    --sx: 50%;
//    --ex: 150%;
//    --sy: -50%;
//    --ey: 50%;
//  }
//  .box:nth-child(2) {
//    --sx: -50%;
//    --sy: -50%;
//    --ex: 50%;
//    --ey: -50%;
//  }
//  .box:nth-child(3) {
//    --sx: 150%;
//    --sy: 50%;
//    --ex: 50%;
//    --ey: 50%;
//  }
//  .box:nth-child(4) {
//    --sx: 50%;
//    --sy: 50%;
//    --ex: -50%;
//    --ey: -50%;
//  }
// }

// @keyframes slide {
//  0% {
//    transform: translate(var(--sx), var(--sy));
//  }
//  45%, 70% {
//    transform: translate(var(--ex), var(--sy));
//  }
//  95%, 100% {
//    transform: translate(var(--ex), var(--ey));
//  }
// }

// @keyframes load {
//  20% {
//    content: '.';
//  }
//  40% {
//    content: '..';
//  }
//  80%, 100% {
//    content: '...';
//  }
// }

// .loader {
//  display: flex;
//  flex-direction: column;
//  h1 {
//    color: #C742F6;
//  }
//  span {
//    color: transparent;
//    position: relative;
//    &::before {
//      content: '.';
//      position: absolute;
//      bottom: -2px;
//      color: #C742F6;
//      margin-left: 1px;
//      animation: load 1.5s linear infinite;
//      display: inline-block;
//    }
//  }
// }

const template = `
  <style>
    :host {
      --size: 40px;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .isometric {
      position: relative;
      transform: rotateX(55deg) rotateZ(-45deg) translate(calc(var(--size) * -2), 0);
      margin-bottom: calc(3 * var(--size));
    }
    .box {
      position: absolute;
      width: var(--size);
      height: var(--size);
      background: #f49043;
      animation: slide .9s cubic-bezier(.65,.53,.59,.93) infinite;
    }
    .box:before, .box:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .box:before {
      background: #D067F5;
      transform: skew(0deg, -45deg);
      right: 100%;
      top: 50%;
    }
    .box:after {
      background: #BDF06D;
      transform: skew(-45deg, 0deg);
      top: 100%;
      right: 50%;
    }
    .box:nth-child(1) {
      --sx: 50%;
      --sy: -50%;
      --ex: 150%;
      --ey: 50%;
    }
    .box:nth-child(2) {
      --sx: -50%;
      --sy: -50%;
      --ex: 50%;
      --ey: -50%;
    }
    .box:nth-child(3) {
      --sx: 150%;
      --sy: 50%;
      --ex: 50%;
      --ey: 50%;
    }
    .box:nth-child(4) {
      --sx: 50%;
      --sy: 50%;
      --ex: -50%;
      --ey: -50%;
    }
    h1 {
      color: #E97012;
    }
    span {
      color: transparent;
      position: relative;
    }
    span:before {
      content: ".";
      position: absolute;
      bottom: -2px;
      color: #E97012;
      margin-left: 1px;
      animation: load 1.5s linear infinite;
      display: inline-block;
    }
    @keyframes slide {
      0% {
        transform: translate(var(--sx), var(--sy));
      }
      65% {
        transform: translate(var(--ex), var(--sy));
      }
      95%, 100% {
        transform: translate(var(--ex), var(--ey));
      }
    }
    @keyframes load {
      20% {
        content: ".";
      }
      40% {
        content: "..";
      }
      80%, 100% {
        content: "...";
      }
    }
  </style>
  <div class="isometric">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <h1>Загрузка<span>...</span></h1>
`;

customElements.define('ui-loader', class extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = template;
  }
});