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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 32x 32x 33x 32x 132x 32x 33x 33x 128x 129x | <script setup lang="ts">
import { computed } from "vue";
import { toCssSize } from "../../../utils/size";
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: false,
});
const trackInfo = computed(() => resolveTrack(props.track));
const duration = computed(() => 1 / (props.speed > 0 ? props.speed : 1));
/* Each segment starts a fixed FRACTION of the cycle behind the next;
that ordering is what makes the arcs gather and chase. (Delays in
absolute seconds only lined up at one speed.) */
const PHASES = [0.45, 0.3, 0.15, 0];
const delayOf = (i: number) => `${-PHASES[i - 1]! * duration.value}s`;
</script>
<template>
<div
class="spinner-ring"
:style="{
width: toCssSize(props.size),
height: toCssSize(props.size),
color: props.color,
}"
>
<div
v-if="trackInfo"
class="vslk-ring-track"
:data-vslk-track="trackInfo.attr"
:style="{ borderWidth: props.thickness + 'px', borderColor: trackInfo.color }"
/>
<div
v-for="i in 4"
:key="i"
class="segment"
:style="{
borderWidth: props.thickness + 'px',
borderColor: props.color + ' transparent transparent transparent',
animationDuration: duration + 's',
animationDelay: delayOf(i),
}"
/>
</div>
</template>
<style scoped>
.spinner-ring {
aspect-ratio: 1 / 1;
max-width: 100%;
position: relative;
display: inline-block;
box-sizing: border-box;
}
.vslk-ring-track {
position: absolute;
inset: 0;
box-sizing: border-box;
border-style: solid;
border-radius: 50%;
}
.segment {
box-sizing: border-box;
position: absolute;
inset: 0;
border-style: solid;
border-radius: 50%;
animation: ring-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes ring-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
|