KawAnime/components/loader.vue

48 lines
975 B
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-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: 92vh;
}
.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>