<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>
