65 lines
1.1 KiB
Vue
65 lines
1.1 KiB
Vue
<template>
|
|
<div class="loading-spinner" :class="{ overlay: overlay }">
|
|
<v-progress-circular
|
|
:size="size"
|
|
:width="width"
|
|
:color="color"
|
|
:indeterminate="true"
|
|
>
|
|
<span v-if="label" class="loading-label">{{ label }}</span>
|
|
</v-progress-circular>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'LoadingSpinner',
|
|
props: {
|
|
size: {
|
|
type: [Number, String],
|
|
default: 32
|
|
},
|
|
width: {
|
|
type: [Number, String],
|
|
default: 4
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'primary'
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
overlay: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loading-spinner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.loading-spinner.overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.loading-label {
|
|
position: absolute;
|
|
font-size: 0.75rem;
|
|
margin-top: 4rem;
|
|
}
|
|
</style> |