forked from vikunja/frontend
feat: add fade to loading spinner
This commit is contained in:
parent
e2cc505564
commit
acc315b581
|
@ -18,13 +18,15 @@
|
|||
</card>
|
||||
</no-auth-wrapper>
|
||||
</section>
|
||||
<section class="vikunja-loading" v-else>
|
||||
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
||||
<p>
|
||||
<span class="loader-container is-loading-small is-loading"></span>
|
||||
{{ $t('ready.loading') }}
|
||||
</p>
|
||||
</section>
|
||||
<transition name="fade">
|
||||
<section class="vikunja-loading" v-if="showLoading">
|
||||
<img alt="Vikunja" :src="logoUrl" width="100" height="100"/>
|
||||
<p>
|
||||
<span class="loader-container is-loading-small is-loading"></span>
|
||||
{{ $t('ready.loading') }}
|
||||
</p>
|
||||
</section>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -51,6 +53,9 @@ export default {
|
|||
ready() {
|
||||
return this.$store.state.vikunjaReady
|
||||
},
|
||||
showLoading() {
|
||||
return !this.ready || this.error !== ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
|
@ -71,6 +76,13 @@ export default {
|
|||
height: 100vh;
|
||||
width: 100vw;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: $grey-100;
|
||||
z-index: 99;
|
||||
|
||||
img {
|
||||
margin-bottom: 1rem;
|
||||
|
|
Loading…
Reference in New Issue
Block a user