vpu-spinner.js

// Note: This doesn't have a lit-element dependency on purpose, so it can be loaded faster before
// other web components (assuming it's not bundled)

class Spinner extends HTMLElement {

    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
<style>
:host {
    display: block;
}
#all-spinner-tuglogo {
  width:130px;
    height:130px;
      position:relative;
        background-color:transparent;
          margin:0 auto;
}

.all-spinner-tuglogo-box {
  width:20%;
    height:20%;
     background-color:#e4154b;
        position:absolute;
          top:50%;
            left:50%;
          animation-duration: 1.6s;
            animation-direction:alternate;
              animation-iteration-count:infinite;
    animation-fill-mode:both;
      animation-timing-function:ease;
        transition: transform 0.5s, background-color 0.2s 0.5s;
}

#all-spinner-tuglogo-box-1 {
      animation-name: box1;
        transform:translateX(-160%) translateY(-50%);
}

#all-spinner-tuglogo-box-2 {
      transform-origin:0 0;
      animation-name: box2;
transform:scale(1) translateX(-50%) translateY(-50%);
}

#all-spinner-tuglogo-box-3 {

      animation-name: box3;
        animation-delay:0.3s;
          transform:translateX(60%) translateY(-50%); visibility:visible;
}

#all-spinner-tuglogo-box-4 {

      animation-name: box4;
        animation-delay:0.1s;
transform:translateX(0%) translateY(-100%);  visibility:visible;
}

#all-spinner-tuglogo-box-5 {

      animation-name: box5;
        animation-delay:0.2s;
transform:translateX(-100%) translateY(0%);  visibility:visible;
}

@keyframes box1 {
    0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }