<script setup lang="ts">
defineProps<{
	width?: string;
	height?: string;
	circle?: boolean;
}>();
</script>

<template>
	<div class="skeleton" :class="{ circle }" :style="{ width, height }"></div>
</template>

<style scoped>
.skeleton {
	background-color: hsl(var(--surface0));
	border-radius: var(--radius-sm);
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.circle {
	border-radius: 50%;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
</style>
