<style scoped>
#blur {
  display: flex;
  justify-content:center;
  flex-direction: column;
}
#blur #loop-spinner-svg{
  transform: scale(0.7)  scaleY(-1);
}
#blur * {
  --hue: 223;
  --bg: hsl(var(--hue),90%,95%);
  --fg: hsl(var(--hue),90%,5%);
  --trans-dur: 0.3s;
}

#blur .content-spinner {
  display: flex;
  justify-content: center;
  font-size: 18px;
  color: white;
  font-weight: bold;
  background: transparent;
}

.spinner-svg-box {
    display: flex;
    justify-content: center;
}

.ip {
  width: 18em!important;
  height: 10rem!important;
}
.ip__track {
  stroke: hsl(var(--hue),90%,90%);
  transition: stroke var(--trans-dur);
}
.ip__worm1,
.ip__worm2 {
  animation: worm1 2s linear infinite;
}
.ip__worm2 {
  animation-name: worm2;
}

  :root {
    --bg: hsl(var(--hue),90%,5%);
    --fg: hsl(var(--hue),90%,95%);
  }
  .ip__track {
    stroke: hsl(var(--hue),90%,15%);
  }

/* Animation */
@keyframes worm1 {
  from {
    stroke-dashoffset: 0;
  }
  50% {
    animation-timing-function: steps(1);
    stroke-dashoffset: -358;
  }
  50.01% {
    animation-timing-function: linear;
    stroke-dashoffset: 358;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes worm2 {
  from {
    stroke-dashoffset: 358;
  }
  50% {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -358;
  }
}

</style>
<template>
  <div id="blur">
    <div class="content-spinner typewriter text-center" >
      <h1>{{ title ? title : '' }}</h1>
    </div>
    <div class="spinner-svg-box">
      <svg id="loop-spinner-svg" width="300" height="150" xmlns="http://www.w3.org/2000/svg" class="ip">
        <defs>
          <linearGradient y2="0" x2="1" y1="0" x1="0" id="grad1">
            <stop stop-color="#5ebd3e" offset="0%"/>
            <stop stop-color="#ffb900" offset="33%"/>
            <stop stop-color="#f78200" offset="67%"/>
            <stop stop-color="#e23838" offset="100%"/>
          </linearGradient>
          <linearGradient y2="0" x2="0" y1="0" x1="1" id="grad2">
            <stop stop-color="#e23838" offset="0%"/>
            <stop stop-color="#973999" offset="33%"/>
            <stop stop-color="#009cdf" offset="67%"/>
            <stop stop-color="#5ebd3e" offset="100%"/>
          </linearGradient>
        </defs>
        <g>
          <title>Layer 1</title>
          <g id="svg_1" stroke-width="30" stroke-linecap="round" fill="none">
            <g id="svg_2" stroke="#ddd" class="ip__track">
              <path id="svg_3" d="m30,75s0,-56 60,-56s60,112 120,112s60,-56 60,-56"/>
              <path id="svg_4" d="m270,75s0,-56 -60,-56s-60,112 -120,112s-60,-56 -60,-56"/>
            </g>
            <g id="svg_5" stroke-dasharray="180 656">
              <path id="svg_6" d="m30,75s0,-56 60,-56s60,112 120,112s60,-56 60,-56" stroke-dashoffset="0" stroke="url(#grad1)" class="ip__worm1"/>
              <path id="svg_7" d="m270,75s0,-56 -60,-56s-60,112 -120,112s-60,-56 -60,-56" stroke-dashoffset="358" stroke="url(#grad2)" class="ip__worm2"/>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
module.exports = {
  props: [],
  data: () => {
    return {
        'title' : false,
    };
  },
  methods : {
      setTitle(title){
        this.title = title
      }
  },
}
</script>