src/components/PluginLoader.vue

<script setup lang="ts">
import {ref} from "vue";

const props = withDefaults(defineProps<{
    isButton? : boolean;
    color? : string;
}>(), {
    isButton: false,
    color: '#fff',
});

const currColor = ref(props.color);

</script>

<template>
    <template v-if="isButton">
        <div class="button-loader" />
    </template>
    <template v-else>
        <div class="section-loader" />
    </template>
</template>

<style lang="scss" scoped>
@import '@plugin/assets/_variables_override.scss';

.button-loader {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    border: 2px solid v-bind(color);
    border-bottom-color: transparent;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100%   {
            transform: rotate(360deg);
        }
    }
}

.section-loader {
    position: relative;
    width: 100px;
    height: 50px;
    margin-inline: auto;
    background-repeat: no-repeat;
    background-image: linear-gradient(v-bind(color) 50px, transparent 0),
    linear-gradient(v-bind(color) 50px, transparent 0),
    linear-gradient(v-bind(color) 50px, transparent 0),
    linear-gradient(v-bind(color) 50px, transparent 0),
    linear-gradient(v-bind(color) 50px, transparent 0),
    linear-gradient(v-bind(color) 50px, transparent 0);
    background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
    animation: rikSpikeRoll 0.65s linear infinite alternate;

    @keyframes rikSpikeRoll {
        0% { background-size: 10px 3px;}
        16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
        33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
        50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
        66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
        83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
        100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
    }
}
</style>