57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// 16 leaves: alternating Type A / B, rotating 22.5° apart around (340,180)
|
|
const leaves = Array.from({ length: 16 }, (_, i) => {
|
|
const angle = i * 22.5
|
|
const isB = i % 2 === 1
|
|
return isB
|
|
? {
|
|
path: 'M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z',
|
|
line: { x1: 340, y1: 75, x2: 343, y2: 111 },
|
|
transform: `rotate(${angle},340,180)`,
|
|
}
|
|
: {
|
|
path: 'M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z',
|
|
line: { x1: 340, y1: 73, x2: 343, y2: 110 },
|
|
transform: `rotate(${angle},340,180)`,
|
|
}
|
|
})
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
size?: number
|
|
color?: string
|
|
spinning?: boolean
|
|
}>(),
|
|
{
|
|
size: 48,
|
|
spinning: true,
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
class="nych-loading-icon"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
viewBox="226 66 228 228"
|
|
:width="size"
|
|
:height="size"
|
|
role="img"
|
|
aria-label="loading"
|
|
:style="{ color }"
|
|
>
|
|
<g class="wreath" fill="currentColor" stroke="currentColor" :style="spinning ? undefined : { animation: 'none' }">
|
|
<g v-for="(leaf, i) in leaves" :key="i" :transform="leaf.transform">
|
|
<path :d="leaf.path" />
|
|
<line
|
|
:x1="leaf.line.x1"
|
|
:y1="leaf.line.y1"
|
|
:x2="leaf.line.x2"
|
|
:y2="leaf.line.y2"
|
|
stroke-width="0.8"
|
|
stroke-linecap="round"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</template>
|