<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' const SPINNER_DELAY = 700 export default { oncreate () { setTimeout(() => { this.set({ shown: true }) }, SPINNER_DELAY) }, data: () => ({ shown: false }), components: { LoadingSpinner } } </script>