<template>
  <van-popup
    v-if="show"
    v-model="show"
    :close-on-click-overlay="false"
    style="background-color: transparent"
  >
    <div
      id="globalLoading"
      class="loadingWrap"
    >
      <van-loading
        v-if="show"
        vertical
        type="spinner"
      >
        <div
          v-if="text"
          class="text"
        >
          {{ text }}
          <span class="dotting" />
        </div>
      </van-loading>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'Loading',
  data() {
    return {
      show: false,
      text:''
    };
  },
};
</script>

<style lang="scss" scoped>
.loadingWrap{
    ::v-deep .van-popup{
        background-color:rgba(0,0,0,.7);
    }

}
.text{
      width: 150px;
      height: 30px;
      z-index: 99;
      font-size: 16px;
      text-align: center;
      background: linear-gradient(to right, #00bda5,  #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation:  hue 3s linear infinite;
      }
      @keyframes hue {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}
.dotting {
    display: inline-block; min-width: 2px; min-height: 2px;
    box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9 , ..., 3个点 */
    background: linear-gradient(to right, #00bda5,  #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    animation: dot 1.5s infinite step-start both; /* for IE10 , ... */
}
.dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ''; } /* for IE9  覆盖 IE8 */

@keyframes dot {
    25% { box-shadow: none; filter: hue-rotate(0deg);}                                  /* 0个点 */
    50% { box-shadow: 2px 0 currentColor; filter: hue-rotate(180deg)}                    /* 1个点 */
    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor;  /* 2个点 */ filter: hue-rotate(360deg)}
}
</style>
