Nuxt/examples/custom-loading/components/loading.vue

37 lines
549 B
Vue
Raw Normal View History

2016-11-11 14:30:11 +00:00
<template lang="html">
<div class="loading-page" v-if="loading">
<p>Loading...</p>
</div>
</template>
<script>
export default {
data: () => ({
loading: false
}),
methods: {
start () {
this.loading = true
},
finish () {
this.loading = false
}
}
}
</script>
2016-11-19 21:17:57 +00:00
<style scoped>
2016-11-11 14:30:11 +00:00
.loading-page {
position: fixed;
top: 0;
left: 0;
2016-11-19 21:17:57 +00:00
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
2016-11-11 14:30:11 +00:00
text-align: center;
2016-11-19 21:17:57 +00:00
padding-top: 200px;
2016-11-11 14:30:11 +00:00
font-size: 30px;
2016-11-19 21:17:57 +00:00
font-family: sans-serif;
2016-11-11 14:30:11 +00:00
}
</style>