<template>
  <div class="markbox" v-show="loading">
    <div class="loading"></div>
  </div>
</template>
<script>
import eventBus from '@/utils/eventBus.js';
export default {
  name: 'loading',
  data() {
    return {
      loading: false,
    }
  },
  created() {
    eventBus.$on('loading', data => {
      this.loading = !!data;
    });
  }
}
</script>
<style lang="less" scoped>
.markbox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
}
.loading {
  width: 45px;
  height: 45px;
  display: block;
  animation: sunLoading 1s steps(12, end) infinite;
  background: transparent
    url('data:image/gif;base64,[encoded data, 17684 characters]');
  background-size: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
