117 lines
2.2 KiB
Vue
117 lines
2.2 KiB
Vue
<!-- Ported from legacy henza_pwa/src/components/spinner.vue -->
|
|
<template>
|
|
<Spin :spinning="spinning" :tip="tip" :size="(size as 'small' | 'default' | 'large')" :delay="delay" :class="fixed ? '!max-h-screen !fixed' : ''">
|
|
<template #indicator>
|
|
<img v-if="!indicator" src="/img/montzar-logo.png" alt="Montzar" class="spinner-brand" width="48" height="48" />
|
|
<div class="loading" v-else>
|
|
<div class="effect-1 effects"></div>
|
|
<div class="effect-2 effects"></div>
|
|
<div class="effect-3 effects"></div>
|
|
</div>
|
|
</template>
|
|
<div :class="cls">
|
|
<slot />
|
|
</div>
|
|
</Spin>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Spin } from 'ant-design-vue'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
tip?: string
|
|
size?: string
|
|
cls?: string
|
|
delay?: number
|
|
spinning: boolean
|
|
indicator?: boolean
|
|
fixed?: boolean
|
|
}>(),
|
|
{ size: 'large', fixed: true },
|
|
)
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.loading * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
border: 3px solid transparent;
|
|
}
|
|
|
|
.loading .effect-1,
|
|
.loading .effect-2 {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid transparent;
|
|
border-left: 3px solid @secondary;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading .effect-1 {
|
|
animation: rotate 1s ease infinite;
|
|
}
|
|
|
|
.loading .effect-2 {
|
|
animation: rotateOpacity 1s ease infinite 0.1s;
|
|
}
|
|
|
|
.loading .effect-3 {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 3px solid transparent;
|
|
border-left: 3px solid @secondary;
|
|
animation: rotateOpacity 1s ease infinite 0.2s;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.loading .effects {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateOpacity {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
opacity: 0.1;
|
|
}
|
|
100% {
|
|
transform: rotate(1turn);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.spinner-brand {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ant-spin-text {
|
|
color: @primary;
|
|
}
|
|
.loading + .ant-spin-text {
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|