<template>
  <div v-if="show">
    <div class="common-loading">
      <div class="common-loading-wrap">
        <div class="loading-inner">
          <Icon type="ios-loading" size="25" class="spin-icon-load umar-t10"></Icon>
          <div class="fz-12">{{msg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      //开、关
      type: Boolean,
      defualt: true
    },
    msg: {
      //提示语
      type: String,
      default: "加载中..."
    }
  }
};
</script>

<style>
.common-loading {
  position: absolute;
  width: 100%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: 50;
  top: 49px;
  bottom: 0;
}

.common-loading-wrap {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #2d8cf0;
}
.loading-inner {
  display: table-cell;
  vertical-align: top;
}
.ivu-spin {
  font-size: 15px;
}

.spin-icon-load {
  animation: ani-spin 1s linear infinite;
}

@keyframes ani-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes ani-spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
