<template>
  <div>
    <transition name="loading-fade">
      <div v-show="visible" class="jiu-loading">
        <div class="mask" />
        <!-- loading bubble -->
        <div class="loading-bubble-wrapper">
          <div class="loading-bubble" />
        </div>
      </div>
    </transition>
    <button @click="showLoading">show loading</button>
  </div>
</template>

<script>
export default {
  name: "JiuLoading",
  data() {
    return {
      visible: false,
      options: {
        color: "",
        text: "",
        bubble: false
      }
    };
  },
  methods: {
    showLoading() {
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 3000);
    }
  }
};
</script>

<style lang="scss">
.jiu-loading {
  width: 50%;
  float: right;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.2);
}

.loading-fade-enter-active,
.loading-fade-leave-active {
  transition: opacity 0.6s ease-in-out;
}
.loading-fade-enter,
.loading-fade-leave-to {
  opacity: 0;
}

/* loading bubble */
.loading-bubble-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.loading-bubble {
  width: 80px;
  height: 20px;
  position: relative;
}

.loading-bubble::before,
.loading-bubble::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  transform: translate3d(0, 0, 0);
}

.loading-bubble::before {
  animation: loading-bubbleL 2s ease-in-out infinite;
  background: #ee6362;
}

.loading-bubble::after {
  animation: loading-bubbleR 2s ease-in-out infinite;
  background: #2cb0b2;
}

@keyframes loading-bubbleL {
  0% {
    left: 0;
    transform: scale(1.1);
  }
  50% {
    left: calc(100% - 20px);
    transform: scale(1);
  }
  100% {
    left: 0;
    transform: scale(1.1);
  }
}

@keyframes loading-bubbleR {
  0% {
    left: calc(100% - 20px);
    transform: scale(1.1);
  }
  50% {
    left: 0;
    transform: scale(1);
  }
  100% {
    left: calc(100% - 20px);
    transform: scale(1.1);
  }
}
</style>