Skeleton
Skeleton loaders provide visual placeholders for content that is still loading. They improve perceived performance by showing users that content is being loaded, creating a better user experience during data fetching operations.
Basic skeleton
The Skeleton component displays an animated placeholder that mimics the shape of content being loaded.
<template>
<IkSkeleton active />
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Sizes
Skeletons support different sizes to match various content types. Use the size prop with predefined sizes: xs, sm, md, lg, xl, or xxl.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeleton active size="xs" />
<IkSkeleton active size="sm" />
<IkSkeleton active size="md" />
<IkSkeleton active size="lg" />
<IkSkeleton active size="xl" />
<IkSkeleton active size="xxl" />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Custom dimensions
You can set custom dimensions using the width, height, or size_px props. The width prop accepts percentage values, while height and size_px accept pixel values.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeleton active :width="100" />
<IkSkeleton active :width="75" />
<IkSkeleton active :width="50" />
<IkSkeleton active :width="25" />
<IkSkeleton active :height="20" />
<IkSkeleton active :size_px="60" />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Round skeleton
Use the round prop to create a skeleton with rounded corners, perfect for circular avatars or rounded elements.
<template>
<div style="display: flex; gap: 16px;">
<IkSkeleton active :size_px="60" />
<IkSkeleton active :size_px="60" round />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Custom border radius
You can set a custom border radius using the border_radius prop for more precise control over the skeleton's shape.
<template>
<div style="display: flex; gap: 16px;">
<IkSkeleton active :width="100" :height="40" :border_radius="8" />
<IkSkeleton active :width="100" :height="40" :border_radius="16" />
<IkSkeleton active :width="100" :height="40" :border_radius="24" />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Conditional rendering
The active prop controls whether the skeleton is displayed. When active is false, the component renders its default slot content instead, making it easy to switch between loading and loaded states.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeleton :active="loading">
<div>Content loaded!</div>
</IkSkeleton>
<IkButton @click="loading = !loading" design="primary">
Toggle Loading
</IkButton>
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
import { IkButton } from '@ikol/ui-kit/components/IkButton';
import { ref } from 'vue';
const loading = ref(true);
</script>Skeleton list item
The IkSkeletonListItem component provides a pre-configured skeleton layout for list items, commonly used in user lists, comment sections, or data tables.
Basic list item
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem />
<IkSkeletonListItem />
<IkSkeletonListItem />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>List item with avatar
Use the avatar prop to include an avatar skeleton in the list item.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem avatar />
<IkSkeletonListItem avatar />
<IkSkeletonListItem avatar />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>List item with secondary line
Add a secondary line of text using the secondary prop.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem secondary />
<IkSkeletonListItem secondary />
<IkSkeletonListItem secondary />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>Complete list item
Combine avatar and secondary props to create a complete list item skeleton with avatar, primary text, and secondary text.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem avatar secondary />
<IkSkeletonListItem avatar secondary />
<IkSkeletonListItem avatar secondary />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>Custom avatar size
Control the avatar size using the avatar_size prop.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem avatar :avatar_size="30" secondary />
<IkSkeletonListItem avatar :avatar_size="40" secondary />
<IkSkeletonListItem avatar :avatar_size="50" secondary />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>Square avatar
Use the avatar_square prop to render a square avatar instead of a circular one.
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<IkSkeletonListItem avatar avatar_square secondary />
<IkSkeletonListItem avatar avatar_square secondary />
<IkSkeletonListItem avatar avatar_square secondary />
</div>
</template>
<script setup>
import { IkSkeletonListItem } from '@ikol/ui-kit/components/IkSkeleton';
</script>Real-world examples
Card skeleton
Create a skeleton for a card component with multiple elements.
<template>
<div style="border: 1px solid var(--border-neutral-regular-default); border-radius: 8px; padding: 16px; max-width: 300px;">
<IkSkeleton active :size_px="120" round style="margin-bottom: 16px;" />
<IkSkeleton active size="lg" :width="100" style="margin-bottom: 8px;" />
<IkSkeleton active size="sm" :width="80" style="margin-bottom: 8px;" />
<IkSkeleton active size="sm" :width="60" />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>Table skeleton
Create a skeleton for a data table with multiple rows.
<template>
<div style="border: 1px solid var(--border-neutral-regular-default); border-radius: 8px; padding: 16px;">
<div style="display: flex; gap: 16px; margin-bottom: 16px;">
<IkSkeleton active :width="20" />
<IkSkeleton active :width="30" />
<IkSkeleton active :width="25" />
<IkSkeleton active :width="25" />
</div>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 16px;">
<IkSkeleton active :width="20" />
<IkSkeleton active :width="30" />
<IkSkeleton active :width="25" />
<IkSkeleton active :width="25" />
</div>
<div style="display: flex; gap: 16px;">
<IkSkeleton active :width="20" />
<IkSkeleton active :width="30" />
<IkSkeleton active :width="25" />
<IkSkeleton active :width="25" />
</div>
<div style="display: flex; gap: 16px;">
<IkSkeleton active :width="20" />
<IkSkeleton active :width="30" />
<IkSkeleton active :width="25" />
<IkSkeleton active :width="25" />
</div>
</div>
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>User profile skeleton
Create a skeleton for a user profile section.
<template>
<div style="border: 1px solid var(--border-neutral-regular-default); border-radius: 8px; padding: 16px; max-width: 400px;">
<div style="display: flex; gap: 16px; margin-bottom: 16px;">
<IkSkeleton active :size_px="80" round />
<div style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
<IkSkeleton active size="lg" :width="70" />
<IkSkeleton active size="sm" :width="50" />
</div>
</div>
<IkSkeleton active :width="100" style="margin-bottom: 8px;" />
<IkSkeleton active :width="100" style="margin-bottom: 8px;" />
<IkSkeleton active :width="80" />
</div>
</template>
<script setup>
import { IkSkeleton } from '@ikol/ui-kit/components/IkSkeleton';
</script>