37 lines
688 B
Vue
37 lines
688 B
Vue
<template>
|
|
<span
|
|
class="spinner"
|
|
role="status"
|
|
:aria-label="label"
|
|
:style="{ width: size, height: size, borderWidth: thickness }"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
size?: string
|
|
thickness?: string
|
|
label?: string
|
|
}>(),
|
|
{ size: "28px", thickness: "3px", label: "Chargement…" },
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spinner {
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
border-style: solid;
|
|
border-radius: 50%;
|
|
border-color: var(--color-8);
|
|
border-top-color: var(--color-5);
|
|
animation: spinner-rotate 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes spinner-rotate {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|