791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
<template>
|
|
<v-overlay :value="loading" color="#013447">
|
|
<div class="loading">
|
|
<div class="spinner">
|
|
<img class="logo one" :src="mySVG" />
|
|
</div>
|
|
<div class="spinner">
|
|
<img class="logo two" :src="mySVG" />
|
|
</div>
|
|
<span>{{ $t('general.loading') }}</span>
|
|
</div>
|
|
</v-overlay>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return{
|
|
loading: false,
|
|
mySVG: require('assets/img/ggz/loading-logo.svg')
|
|
}
|
|
},
|
|
methods: {
|
|
start() {
|
|
this.loading = true
|
|
},
|
|
finish() {
|
|
this.loading = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loading {
|
|
width: 140px;
|
|
height: 180px;
|
|
margin: auto;
|
|
margin-bottom: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
.spinner {
|
|
width: 100%;
|
|
position: absolute;
|
|
.one {
|
|
transform: rotate(25deg);
|
|
}
|
|
-webkit-animation: spin 5s linear infinite;
|
|
animation: spin 5s linear infinite;
|
|
}
|
|
|
|
span{
|
|
display:flex;
|
|
align-items: flex-end;
|
|
font-family:"Source Sans Pro", sans-serif;
|
|
}
|
|
}
|
|
@-webkit-keyframes spin {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|