KawAnime/components/loader.vue

42 lines
800 B
Vue

<template>
<div class="loading-gif">
<h3 class="loading-text">少々お待ち下さいね</h3>
<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"/>
</div>
</template>
<style scoped>
.loading-text
{
width: 100%;
padding: 0;
margin: 0 0 15px -20%;
color: rgba(255, 255, 255, 0.8);
font-family: "Hiragino Mincho Pro", serif;
}
.loading-gif
{
position: absolute;
bottom: 0;
left: 37%;
}
</style>
<script>
export default{
data: function () {
return {
number: this.ran()
}
},
methods: {
ran() {
return parseInt(Math.random() * 2 + 1)
}
},
mounted() {
this.number = this.ran()
}
}
</script>