<template>
  <view class="loading">
    <component :is="`Anime${loadingType}`"></component>
  </view>
</template>

<script>
import Anime1 from './anime1.vue'
import Anime2 from './anime2.vue'
import Anime3 from './anime3.vue'
import Anime4 from './anime4.vue'
import Anime5 from './anime5.vue'
export default {
  name: 'loading',
  components: { Anime1, Anime2, Anime3, Anime4, Anime5 },
  props: {
    loadingType: {
      type: [Number, String],
      default: 2
    }
  }
}
</script>

<style>
.loading{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,.3);
}
</style>
