mealie/frontend/components/global/AppLoader.vue

70 lines
1.3 KiB
Vue
Raw Normal View History

<template>
<div class="mx-auto">
<v-progress-circular :width="size.width" :size="size.size" color="primary lighten-2" indeterminate>
<div class="text-center">
<v-icon :size="size.icon" color="primary lighten-2">
{{ $globals.icons.primary }}
</v-icon>
<div v-if="large" class="text-small">
<slot>
{{ small ? "" : waitingText }}
</slot>
</div>
</div>
</v-progress-circular>
<div v-if="!large" class="text-small">
<slot>
{{ small ? "" : waitingText }}
</slot>
</div>
</div>
</template>
<script>
export default {
props: {
loading: {
2021-08-08 00:49:55 +00:00
type: Boolean,
default: true,
},
small: {
type: Boolean,
default: false,
},
medium: {
type: Boolean,
default: true,
},
large: {
type: Boolean,
default: false,
},
},
computed: {
size() {
if (this.small) {
return {
width: 2,
icon: 30,
size: 50,
};
} else if (this.large) {
return {
width: 4,
icon: 120,
size: 200,
};
}
return {
width: 3,
icon: 75,
size: 125,
};
},
waitingText() {
return this.$t("general.loading-recipes");
2021-08-08 00:49:55 +00:00
},
},
};
</script>