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

46 lines
985 B
HTML
Raw Normal View History

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