loading-spinner{
  display: flex;
  justify-content: center;
  height:calc(2em * 4);
  align-items:flex-end;
  transition: opacity .6s;
}

loading-spinner.mode--dashes > svg {
  animation: loadingSpinning 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

loading-spinner .spinner-dashes {
  /* stroke: black; */
  stroke-width:10;
  stroke-dasharray: 68%;
  stroke-dashoffset: 0;
  animation: loadingSpinner 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes loadingSpinner{
  0%{
    stroke-dasharray: 68%;
  }
  
  50%{
    stroke-dasharray: 110%;
  }
  100%{
    stroke-dasharray: 68%;
  }
}

@keyframes loadingSpinning{
  0%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(360deg);
    animation-timing-function: step-end;
  }
}

loading-spinner.mode--he{
  --duration: 2s;
}

loading-spinner #hE_spinner--rect{
  content:"";
  display: block;
  height: 4em;
  width: 4em;
/*   justify-self:center; */
/*   align-self: center; */
  animation: loadingJumper var(--duration);
  animation-delay: 30ms;
  animation-play-state: running;
  animation-iteration-count: infinite;
  --rotation-stage-1: rotate(15deg);
  --rotation-stage-2: rotate(180deg);
}

loading-spinner #hE_spinner--text{
  content:"";
  display:block;
  height: 4em;
  width: 4em;
/*   justify-self:center; */
/*   align-self: center; */
  animation: loadingJumper var(--duration);
  animation-play-state: running;
  animation-iteration-count: infinite;
  position:absolute;
  --rotation-stage-1: rotate(0);
  --rotation-stage-2: rotate(0);
}

@keyframes loadingJumper{
  0%{
    transform: translateY(0);
  }
  20%{
    /** Jump anticipation **/
    transform: translateY(10%) scale(1.3, .7);
    animation-timing-function: linear;
  }
  28%{
    /** Start the jump and stretch **/
    transform: translateY(-70%) scale( .8, 1.2) var(--rotation-stage-1);
    animation-timing-function: ease-out;
  }
  60%{ /** START FALL **/
    /** Reach max height of jump and rotate 90 degrees **/
    transform: translateY(-200%) scale( .95, 1.05) var(--rotation-stage-2);
    animation-timing-function: step-end;
  }
  61%{ /** START FALL **/
    /** Step to next frame and reset rotation **/
    transform: translateY(-200%) scale( .95, 1.05);
    /** Ease in as if gravity is assisting the fall **/
    animation-timing-function: ease-in;
  }
  75%{
    transform: translateY(0%) scale( 1.1, .9);
    /** Ease in as if gravity is assisting the fall **/
    animation-timing-function: ease-out;
  }
  80%{
    transform: translateY(15%) scale(1.4, .6);
    animation-timing-function: ease-in-out
  }
  90%{
    transform: translateY(0) scale(1,1);
  }
  100%{
    
  }
}