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

41 lines
747 B
HTML

<div class="loading-container">
{{#if show}}
<div transition:fade class="loading-mask">
<LoadingSpinner maskStyle="true"/>
</div>
{{/if}}
</div>
<style>
.loading-container {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
pointer-events: none;
z-index: 100;
}
.loading-mask {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--mask-bg);
opacity: 0.6;
pointer-events: auto;
}
</style>
<script>
import { fade } from 'svelte-transitions'
import LoadingSpinner from './LoadingSpinner.html'
export default {
transitions: {
fade
},
components: {
LoadingSpinner
}
}
</script>