37 lines
689 B
Vue
37 lines
689 B
Vue
<template>
|
|
<span class="skeleton" :style="{ width, height, borderRadius: radius }" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
width?: string
|
|
height?: string
|
|
radius?: string
|
|
}>(),
|
|
{ width: "100%", height: "1rem", radius: "var(--radius-sm)" },
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.skeleton {
|
|
display: block;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--neutral-10) 0%,
|
|
var(--neutral-5) 50%,
|
|
var(--neutral-10) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.3s linear infinite;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
</style>
|