Skeleton

<script lang="ts">
	import { Skeleton } from '#lib/components/ui/skeleton/index.js';
</script>

<div class="row">
	<Skeleton style="width: 3rem; height: 3rem; border-radius: 9999px" />
	<div class="lines">
		<Skeleton style="width: 15rem; height: 1rem" />
		<Skeleton style="width: 12rem; height: 1rem" />
	</div>
</div>

<style>
	.row {
		display: flex;
		align-items: center;
		gap: var(--dui-space-4);
	}

	.lines {
		display: grid;
		gap: var(--dui-space-2);
	}
</style>

npx distill-ui add skeleton

import Root from './skeleton.svelte';

export { Root, Root as Skeleton };

<script lang="ts">
	import type { HTMLAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		class: className,
		...restProps
	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & { ref?: HTMLDivElement | null } = $props();
</script>

<div {...restProps} bind:this={ref} aria-hidden="true" class={['skeleton', className]}></div>

<!--
	Options you can set from a parent or on the skeleton itself:
	--dui-skeleton-radius, --dui-skeleton-bg
-->

<style>
	.skeleton {
		border-radius: var(--dui-skeleton-radius, var(--dui-radius-md));
		background: var(--dui-skeleton-bg, var(--dui-color-muted));
		animation: distill-pulse var(--dui-duration-pulse) var(--dui-ease-in-out) infinite;
	}
</style>