<template>
  <div v-if="show">
  	<div v-if="type === 1" class="echoss_loading_type01">
      <div class="echoss_loading_type01_wrap">
        <div class="echoss_loading_type01_gif_wrap">
          <img class="echoss_loading_type01_gif_frame" src="./assets/images/echoss_loading_type01_frame.png" />
          <img class="echoss_loading_type01_gif" src="./assets/images/echoss_loading_type01.gif" />
        </div>
        <img class="echoss_loading_type01_motion01" src="./assets/images/echoss_loading_type01_01.png" />
        <img class="echoss_loading_type01_motion02" src="./assets/images/echoss_loading_type01_02.png" />
        <img class="echoss_loading_type01_motion03" src="./assets/images/echoss_loading_type01_03.png" />
      </div>
  	</div>

    <div v-if="type === 2" class="echoss_loading_type02">
      <div class="echoss_loading_type02_wrap">
        <div class="echoss_loading_type02_frame_wrap">
          <img class="echoss_loading_type02_frame" src="./assets/images/echoss_loading_type01_frame.png" />
        </div>
        <img class="echoss_loading_type02_motion01" src="./assets/images/echoss_loading_type02_01.png" />
        <img class="echoss_loading_type02_motion02" src="./assets/images/echoss_loading_type02_02.png" />
        <img class="echoss_loading_type02_motion03" src="./assets/images/echoss_loading_type02_03.png" />
        <img class="echoss_loading_type02_motion04" src="./assets/images/echoss_loading_type02_04.png" />
        <img class="echoss_loading_type02_motion05" src="./assets/images/echoss_loading_type02_05.png" />
      </div>
  	</div>

    <div v-if="type === 3" class="echoss_loading_type03">
      <div class="echoss_loading_type03_wrap">
        <div class="echoss_loading_type03_motion01"></div>
        <div class="echoss_loading_type03_motion02"></div>
        <div class="echoss_loading_type03_motion03"></div>
        <div class="echoss_loading_type03_motion04"></div>
        <div class="echoss_loading_type03_motion05"></div>
        <div class="echoss_loading_type03_motion06"></div>
        <div class="echoss_loading_type03_motion07"></div>
        <div class="echoss_loading_type03_motion08"></div>
        <div class="echoss_loading_type03_motion09"></div>
        <div class="echoss_loading_type03_motion10"></div>
        <div class="echoss_loading_type03_motion11"></div>
        <div class="echoss_loading_type03_motion12"></div>
      </div>
    </div>
  	<div v-if="dim" class="echoss_loading_dim" />
  </div>
</template>

<script>
export default {
	name: 'EchossLoading',
	data () {
		return {
      //
		}
	},
	props: {
		type: {
			type: Number,
			default: 1
		},
		show: {
			type: Boolean,
			default: false
		},
		dim: {
			type: Boolean,
			default: true
		}
	}
}
</script>

<style>
  @import './assets/css/stamp_component.css';
</style>
