Nuxt 3 Loading Component?
Hey guys,
I've just noticed that Nuxt 3 doesn't have the same loading component as V2. Is there a way I can use my old loading component with Nuxt 3? What's the best workaround for this?
I've just noticed that Nuxt 3 doesn't have the same loading component as V2. Is there a way I can use my old loading component with Nuxt 3? What's the best workaround for this?
<template>
<transition name="fade">
<div v-if="loading" class="loading-page">
<p id="loadingTitle">Loading...</p>
<p class="number text-9xl font-righteous"></p>
</div>
</transition>
</template>
<script>
export default {
data: () => ({
loading: true,
}),
beforeMount() {
const numb = document.querySelector('.number')
let counter = 0
setInterval(() => {
if (counter === 100) {
clearInterval()
} else {
counter += 1
numb.textContent = counter + '%'
}
}, 10)
},
methods: {
start() {
this.loading = true
},
finish() {
this.loading = false
},
},
}
</script>
<style scoped>
#loadingTitle {
opacity: 0;
animation-name: fadein;
animation-duration: 0.25s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
padding-top: 200px;
font-size: 30px;
z-index: 999;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style><template>
<transition name="fade">
<div v-if="loading" class="loading-page">
<p id="loadingTitle">Loading...</p>
<p class="number text-9xl font-righteous"></p>
</div>
</transition>
</template>
<script>
export default {
data: () => ({
loading: true,
}),
beforeMount() {
const numb = document.querySelector('.number')
let counter = 0
setInterval(() => {
if (counter === 100) {
clearInterval()
} else {
counter += 1
numb.textContent = counter + '%'
}
}, 10)
},
methods: {
start() {
this.loading = true
},
finish() {
this.loading = false
},
},
}
</script>
<style scoped>
#loadingTitle {
opacity: 0;
animation-name: fadein;
animation-duration: 0.25s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
.loading-page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
padding-top: 200px;
font-size: 30px;
z-index: 999;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
