de-net/src/view/components/loading.vue

<template>
    <img :src="icon" alt="" class="loading"
        :style="{ 'width': `${width}px`, 'height': `${height}px`, 'margin-left': `-${width / 2}px`, 'margin-top': `-${height / 2}px` }" />
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
    width: {
        type: Number,
        default: 40
    },
    height: {
        type: Number,
        default: 40
    },
    icon: {
        type: String,
        default: require('@/assets/svg/icon-loading-gray2.svg')
    }
})
</script>
<style lang="scss" scoped>
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}
</style>