Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 31x 31x 31x 31x 31x 35x 35x 34x | <script setup lang="ts">
import { computed } from 'vue'
import { resolveTrack } from '../track'
interface Props {
size?: number | string
color?: string
speed?: number
thickness?: number
track?: boolean | string
}
const props = withDefaults(defineProps<Props>(), {
size: 40,
color: 'currentColor',
speed: 1,
thickness: 4,
track: true
})
const trackInfo = computed(() => resolveTrack(props.track))
const formattedSize = computed(() => {
return typeof props.size === 'number' ? `${props.size}px` : props.size
})
const formattedDuration = computed(() => {
const duration = props.speed > 0 ? 1 / props.speed : 1
return `${duration}s`
})
</script>
<template>
<div
class="vslk-spinner-circle"
:data-vslk-track="trackInfo?.attr"
:style="{
width: formattedSize,
height: formattedSize,
color: props.color,
borderWidth: `${props.thickness}px`,
borderColor: trackInfo?.color ?? 'transparent',
borderTopColor: props.color,
animationDuration: formattedDuration,
}"
/>
</template>
<style scoped>
.vslk-spinner-circle {
aspect-ratio: 1 / 1;
max-width: 100%;
box-sizing: border-box;
border-style: solid;
/* the track color is set inline from the `track` prop */
border-color: transparent;
border-radius: 50%;
animation: vslk-spin linear infinite;
}
@keyframes vslk-spin {
to {
transform: rotate(360deg);
}
}
</style>
|