koi.rip
forked from
vt3e.cat/bbell
wip bsky client for the web & android
vt3e.cat
1<script setup lang="ts">
2withDefaults(
3 defineProps<{
4 width?: string
5 height?: string
6 circle?: boolean
7 }>(),
8 { width: '100%', height: '60px', circle: false },
9)
10</script>
11
12<template>
13 <div class="skeleton" :class="{ circle }" :style="{ width, height }"></div>
14</template>
15
16<style scoped>
17.skeleton {
18 background-color: hsl(var(--surface0));
19 border-radius: var(--radius-sm);
20 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
21}
22.circle {
23 border-radius: 50%;
24}
25
26@keyframes pulse {
27 0%,
28 100% {
29 opacity: 1;
30 }
31 50% {
32 opacity: 0.5;
33 }
34}
35</style>