<template>
  <div class='loadingmark'>
    <div class="loading-audio">
      <svg :width="width+'px'" :height="height+'px'" xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" preserveAspectRatio="xMidYMid">
        <g transform="translate(20 50)">
          <circle cx="0" cy="0" r="7" fill="#11a181" transform="scale(0.99275 0.99275)" class='circle'/>
        </g>
        <g transform="translate(40 50)">
          <circle cx="0" cy="0" r="7" fill="#11a181" transform="scale(0.773605 0.773605)" class='circle1'/>
        </g>
        <g transform="translate(60 50)">
          <circle cx="0" cy="0" r="7" fill="#11a181" transform="scale(0.42525 0.42525)" class='circle2'/>
        </g>
        <g transform="translate(80 50)">
          <circle cx="0" cy="0" r="7" fill="#11a181" transform="scale(0.113418 0.113418)" class='circle3'/>
        </g>
      </svg>
    </div>
    <div style="font-size: 18px;font-weight: 500;color:#11a181">Loading...</div>
  </div>
</template>
<script>
export default{
  name: 'loading',
  props: {
    width: {
      type: Number,
      default: 80
    },
    height: {
      type: Number,
      default: 80
    }
  },
  created () {
    this.viewBox = '0 0' + ' ' + (this.width + 10) + ' ' + this.height
  },
  data () {
    return {
      viewBox: ''
    }
  }
}
</script>
<style lang='less' scoped>
.loadingmark{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1600;
  }
  .loading-audio {
    width: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    // background-image: url('data:image/svg+xml,<svg width="135" height="140" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#2d8cf0"><rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite" /><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite" /></rect></svg>');
  }
  .circle{
    animation: ani-demo-spin 1s linear infinite;
    animation-delay:-0.375s;
  }
  @keyframes ani-demo-spin {
    from { transform: scale(0);}
    50%  { transform: scale(1)}
    to   { transform: scale(0)}
  }
  .circle1{
    animation: ani-demo-spin1 1s linear infinite;
    animation-delay:-0.25s;
  }
  @keyframes ani-demo-spin1 {
    from { transform: scale(0);}
    50%  { transform: scale(1)}
    to   { transform: scale(0)}
  }
  .circle2{
    animation: ani-demo-spin2 1s linear infinite;
    animation-delay:-0.125s;
  }
  @keyframes ani-demo-spin2 {
    from { transform: scale(0);}
    50%  { transform: scale(1)}
    to   { transform: scale(0)}
  }
  .circle3{
    animation: ani-demo-spin3 1s linear infinite;
    animation-delay:0s;
  }
  @keyframes ani-demo-spin3 {
    from { transform: scale(0);}
    50%  { transform: scale(1)}
    to   { transform: scale(0)}
  }
</style>
