33 lines
612 B
Vue
Executable File
33 lines
612 B
Vue
Executable File
<template>
|
|
<div class="progress" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.progress {
|
|
flex-shrink: 0;
|
|
border: v-bind(borderSize) solid #425C97;
|
|
border-radius: 100%;
|
|
border-top: v-bind(borderSize) solid #ffffff;
|
|
width: v-bind(size);
|
|
height: v-bind(size);
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts" setup>
|
|
const props = defineProps<{
|
|
size: number;
|
|
}>();
|
|
|
|
const size = `${props.size * 0.25}rem`;
|
|
const borderSize = `${props.size / 3}px`;
|
|
</script> |