KawAnime/components/loader.vue

<template lang="pug">
  transition(name="fade" mode="out-in")
    v-layout(row wrap justify-center align-end).loader-container
      v-flex(xs12).flex-centered
        h3.loading-text.white--text 少々お待ち下さいね〜
      v-flex(xs12).flex-centered
        img(v-if="number === 1" src="~static/images/loading-gif1.gif" height="500")
        img(v-else-if="number === 2" src="~static/images/loading-gif2.gif" height="500")
</template>

<style scoped>
  .loading-text
  {
    padding: 0;
    margin: 0;
    font-family: 'Hiragino Mincho Pro', 'MS PMincho', serif;
  }

  .loader-container
  {
    min-height: calc(100vh - (48px + 24px));
  }

  .flex-centered
  {
    display: flex;
    justify-content: center;
  }
</style>

<script>
  export default{
    data: function () {
      return {
        number: this.ran()
      }
    },
    methods: {
      ran () {
        return parseInt(Math.random() * 2 + 1)
      }
    },
    mounted () {
      this.number = this.ran()
    }
  }
</script>