pinafore/routes/_components/LoadingPage.html

36 lines
651 B
HTML
Raw Normal View History

2018-02-12 01:10:39 +01:00
<div class="loading-page {{shown ? '' : 'hidden'}}">
2018-02-07 05:54:49 +01:00
<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;
2018-02-12 01:10:39 +01:00
transition: opacity 0.25s linear;
2018-02-07 05:54:49 +01:00
}
</style>
<script>
import LoadingSpinner from './LoadingSpinner.html'
2018-03-31 02:14:53 +02:00
const SPINNER_DELAY = 700
2018-02-07 05:54:49 +01:00
export default {
2018-04-20 06:38:01 +02:00
oncreate () {
2018-02-12 01:10:39 +01:00
setTimeout(() => {
this.set({shown: true})
2018-03-31 02:14:53 +02:00
}, SPINNER_DELAY)
2018-02-12 01:10:39 +01:00
},
data: () => ({
shown: false
}),
2018-02-07 05:54:49 +01:00
components: {
LoadingSpinner
}
}
</script>