<template>
  <div class="loading" v-show="msg.show">
    <svg
      version="1.1"
      id="Layer_1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width="48px"
      height="48px"
      viewBox="0 0 24 24"
      style="enable-background: new 0 0 50 50"
      xml:space="preserve">
      <rect x="0" y="0" width="4" height="7" fill="#1989fa">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="scale"
          values="1,1; 1,3; 1,1"
          begin="0s"
          dur="0.6s"
          repeatCount="indefinite" />
      </rect>

      <rect x="10" y="0" width="4" height="7" fill="#1989fa">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="scale"
          values="1,1; 1,3; 1,1"
          begin="0.2s"
          dur="0.6s"
          repeatCount="indefinite" />
      </rect>
      <rect x="20" y="0" width="4" height="7" fill="#1989fa">
        <animateTransform
          attributeType="xml"
          attributeName="transform"
          type="scale"
          values="1,1; 1,3; 1,1"
          begin="0.4s"
          dur="0.6s"
          repeatCount="indefinite" />
      </rect>
    </svg>
    <div></div>
  </div>
</template>

<script>
export default {
  props: {
    msg: Object
  }
};
</script>

<style scoped lang="less">
.loading {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 102;
  div {
    color: #fff;
    padding: 6px 15px;
  }
}
</style>
