ローディングスピナー | Vue3（Options API）

概要

画面読み込み時に表示する、クルクル回るやつです。よく使うのでメモ。

コード

LoadingSpinner.vue

<template>
    <div class="loading-spinner">
        <div class="spinner"></div>
        <p v-if="m">{{ m }}</p>
    </div>
</template>

<script>
export default {
    name: 'LoadingSpinner',
    props: {
        m: {
            type: String,
            default: null,
        },
    },
}
</script>

<style lang="scss" scoped>
.loading-spinner {
    .spinner {
        margin: 2rem auto;
        border: 4px solid #f3f3f3;
        border-top: 4px solid rgb(255, 52, 52);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }
    p {
		text-align: center;
	}
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}
</style>