pinafore/src/routes/_components/LoadingMask.html
Nolan Lawson 4bd181d3cc
fix: update Sapper to latest (#775)
* fix: update to latest sapper

fixes #416

* fix error and debug pages

* requestIdleCallback makes column switching feel way nicer than double rAF

* add export feature

* add better csp info

* workaround for sapper sub-page issue

* clarify in readme about exporting

* fix now config

* switch from rIC to triple raf

* style-loader is no longer used

* update theming guide
2018-12-11 07:31:48 -08:00

46 lines
983 B
HTML

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