import { Component } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

@Component({
  selector: 'rd-loading-instance',
  template: `

    <div id="barLoading" style="display:none">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
    </div>

    <div id="codeLoading" style="display:none">
      <span></span>
      <span></span>
    </div>
    
    <div id="plugLoading" style="display:none">    
      <svg version="1.1" x="0px" y="0px" width="120px" height="60px" viewBox="0 0 240 120">          
        <path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
        L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
          <animate attributeName="stroke-dasharray" attributeType="XML"
            from="500, 50"  to="450 50"
            begin="0s" dur="2s"
            repeatCount="indefinite"/>
          <animate attributeName="stroke-dashoffset" attributeType="XML"
            from="-40"  to="-540"
            begin="0s" dur="2s"
            repeatCount="indefinite"/>  
        </path>
          
        <path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
        L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
        L146.48,87.02z"/>
          
        <path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>  
          
        <path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
          
        <animateMotion
          xlink:href="#plug"
          dur="2s"
          rotate="auto"
          repeatCount="indefinite"
          calcMode="linear"
          keyTimes="0;1"    
          keySplines="0.42, 0, 0.58, 1">
          <mpath xlink:href="#loop-normal"/>
        </animateMotion>
          
        <animateMotion             
          xlink:href="#socket"
          dur="2s"
          rotate="auto"
          repeatCount="indefinite"
          calcMode="linear"
          keyTimes="0;1"
          keySplines="0.42, 0, 0.58, 1">
          <mpath xlink:href="#loop-offset"/>
        </animateMotion>  
      </svg>
    </div>
    
    <div id="peekLoading" style="display:none">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    
    <div id="stairLoading" style="display:none">
      <div class="stairLoading__bar"></div>
      <div class="stairLoading__bar"></div>
      <div class="stairLoading__bar"></div>
      <div class="stairLoading__bar"></div>
      <div class="stairLoading__bar"></div>
      <div class="stairLoading__ball"></div>
    </div>
     
    <div id="twistLoading" style="display:none">
      <svg class='part' x="0px" y="0px" viewBox="0 0 256 256" xml:space="preserve">
        <path class="svgpath" id="playload" d="M189.5,140.5c-6.6,29.1-32.6,50.9-63.7,50.9c-36.1,0-65.3-29.3-65.3-65.3
        c0,0,17,0,23.5,0c10.4,0,6.6-45.9,11-46c5.2-0.1,3.6,94.8,7.4,94.8c4.1,0,4.1-92.9,8.2-92.9c4.1,0,4.1,83,8.1,83
        c4.1,0,4.1-73.6,8.1-73.6c4.1,0,4.1,63.9,8.1,63.9c4.1,0,4.1-53.9,8.1-53.9c4.1,0,4.1,44.1,8.2,44.1c4.1,0,3.1-34.5,7.2-34.5
        c4.1,0,3.1,24.6,7.2,24.6c4.1,0,2.5-14.5,5.2-14.5c2.2,0,0.8,5.1,4.2,4.9c0.4,0,13.1,0,13.1,0c0-34.4-27.9-62.3-62.3-62.3
        c-27.4,0-50.7,17.7-59,42.3" />
    
        <path class="svgbg" d="M61,126c0,0,16.4,0,23,0c10.4,0,6.6-45.9,11-46c5.2-0.1,3.6,94.8,7.4,94.8c4.1,0,4.1-92.9,8.2-92.9
        c4.1,0,4.1,83,8.1,83c4.1,0,4.1-73.6,8.1-73.6c4.1,0,4.1,63.9,8.1,63.9c4.1,0,4.1-53.9,8.1-53.9c4.1,0,4.1,44.1,8.2,44.1
        c4.1,0,3.1-34.5,7.2-34.5c4.1,0,3.1,24.6,7.2,24.6c4.1,0,2.5-14.5,5.2-14.5c2.2,0,0.8,5.1,4.2,4.9c0.4,0,22.5,0,23,0" />
      </svg>
    </div>
    
    <div id="sk-chase" style="display:none">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>

    <div id="spinnerCube" style="display:none">
      <div id="spinnercube1"></div>
      <div id="spinnercube2"></div>
    </div>
  `,
  styleUrls: ["../../css/loading.css"]
})
export class LoadingInstance extends RdComponent {
}