forked from Ivasoft/geovisio-website
88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
<template>
|
|
<div :class="['lds-ring', look, { loaded: isLoaded }]">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
text: { type: String, default: null },
|
|
look: {
|
|
type: String,
|
|
validator: (value: string): boolean => ['sm', 'md', 'lg'].includes(value),
|
|
default: 'sm'
|
|
},
|
|
isLoaded: { type: Boolean, default: true }
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.lds-ring {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.lds-ring div {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
position: absolute;
|
|
width: 256px;
|
|
height: 256px;
|
|
margin: 10px;
|
|
border: 10px solid var(--blue);
|
|
border-radius: 50%;
|
|
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: var(--blue) transparent transparent transparent;
|
|
}
|
|
.loaded {
|
|
div {
|
|
border-color: var(--blue);
|
|
}
|
|
}
|
|
.sm {
|
|
width: toRem(8);
|
|
height: toRem(8);
|
|
div {
|
|
width: toRem(8.4);
|
|
height: toRem(8.4);
|
|
}
|
|
}
|
|
.md {
|
|
width: toRem(16);
|
|
height: toRem(16);
|
|
div {
|
|
width: toRem(16.8);
|
|
height: toRem(16.8);
|
|
}
|
|
}
|
|
.lg {
|
|
width: toRem(32);
|
|
height: toRem(32);
|
|
div {
|
|
width: toRem(25.6);
|
|
height: toRem(25.6);
|
|
}
|
|
}
|
|
.lds-ring div:nth-child(1) {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.lds-ring div:nth-child(2) {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.lds-ring div:nth-child(3) {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes lds-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|