You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.7 KiB
69 lines
1.7 KiB
<template>
|
|
<div class="w-28 h-28 flex-center overflow-hidden relative">
|
|
<span class="loading-animate rounded-full" :style="style"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
|
size: {
|
|
type: Number,
|
|
default: 45
|
|
},
|
|
fill: {
|
|
type: String,
|
|
default: '#515151'
|
|
}
|
|
})
|
|
|
|
const style = computed(() => ({
|
|
color: props.fill,
|
|
fontSize: props.size + 'px'
|
|
}))
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.loading-animate {
|
|
width: 1em;
|
|
height: 1em;
|
|
text-indent: -9999em;
|
|
transform: translateZ(0);
|
|
animation: mlt-shd-spin 1.7s infinite ease, round 1.7s infinite ease;
|
|
}
|
|
|
|
@keyframes mlt-shd-spin {
|
|
0% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
5%,
|
|
95% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
10%,
|
|
59% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
|
|
-0.297em -0.775em 0 -0.477em;
|
|
}
|
|
20% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
|
|
-0.749em -0.34em 0 -0.477em;
|
|
}
|
|
38% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
|
|
-0.82em -0.09em 0 -0.477em;
|
|
}
|
|
100% {
|
|
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
|
|
}
|
|
}
|
|
|
|
@keyframes round {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|