forked from cybrespace/pinafore
		
	
		
			
				
	
	
		
			36 lines
		
	
	
		
			No EOL
		
	
	
		
			651 B
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			36 lines
		
	
	
		
			No EOL
		
	
	
		
			651 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'
 | |
| 
 | |
|   const SPINNER_DELAY = 700
 | |
| 
 | |
|   export default {
 | |
|     oncreate () {
 | |
|       setTimeout(() => {
 | |
|         this.set({ shown: true })
 | |
|       }, SPINNER_DELAY)
 | |
|     },
 | |
|     data: () => ({
 | |
|       shown: false
 | |
|     }),
 | |
|     components: {
 | |
|       LoadingSpinner
 | |
|     }
 | |
|   }
 | |
| </script> |