Pinafore-Web-Client-Frontend/routes/_components/LoadingPage.html

30 lines
564 B
HTML

<div class="loading-page {{shown ? '' : 'hidden'}}">
<LoadingSpinner />
</div>
<style>
.loading-page {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
transition: opacity 0.25s linear;
}
</style>
<script>
import LoadingSpinner from './LoadingSpinner.html'
export default {
oncreate() {
setTimeout(() => {
this.set({shown: true})
}, 200)
},
components: {
LoadingSpinner
}
}
</script>