125 lines
3.0 KiB
Vue
125 lines
3.0 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="!max-h-screen !fixed">
|
|
<template #indicator>
|
|
<svg v-if="!indicator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.39 137.84">
|
|
<g>
|
|
<g>
|
|
<path
|
|
d="M26.69,62.76c18.5,0,29.8,6.86,30.14,23.67C57.17,69.62,68.47,62.76,87,62.76v0c-18.5,0-29.8-6.86-30.14-23.67-.34,16.81-11.64,23.67-30.14,23.67"
|
|
style="fill: #896b43"
|
|
/>
|
|
<path
|
|
d="M25.54,57.76v43.42q-.16,21.22-9.45,29.52-5.64,5-15.26,7.13L0,136.34a24.6,24.6,0,0,0,11.11-12.27q3.64-8.29,3.65-22.89V12.11a10,10,0,0,0-3.07-7.38A10.23,10.23,0,0,0,4.14,1.66h-2V0H38.31V1.66H36.15a10.14,10.14,0,0,0-7.22,2.9,10.73,10.73,0,0,0-3.4,7.21V54.89"
|
|
style="fill: #21284e"
|
|
/>
|
|
<path
|
|
d="M88.86,54.9V11.78a10.71,10.71,0,0,0-3.4-7.21,10.14,10.14,0,0,0-7.22-2.9H76.08V0h36.16V1.67h-2a10.27,10.27,0,0,0-7.55,3.07,10,10,0,0,0-3.07,7.38v89.07q0,14.6,3.65,22.89a24.64,24.64,0,0,0,11.11,12.27l-.83,1.49q-9.61-2.16-15.26-7.13-9.28-8.3-9.45-29.52V57.77"
|
|
style="fill: #21284e"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
<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
|
|
}>(),
|
|
{ size: 'large' },
|
|
)
|
|
</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;
|
|
}
|
|
}
|
|
.ant-spin-text {
|
|
color: @primary;
|
|
}
|
|
.loading + .ant-spin-text {
|
|
margin-top: 24px;
|
|
}
|
|
</style>
|