Usage

Default

Use the skeleton component to show a loading state for content.

Width and Height

Use the width and height props to customize the component's dimensions.

<script setup lang="ts">
import CLSkeleton from '@codeandfunction/callaloo/CLSkeleton';
</script>

<template>
  <CLSkeleton width="200px" height="20px" />
</template>

Rounded

Use the rounded prop to control whether the skeleton has rounded corners. By default, it is set to true.

<script setup lang="ts">
import CLSkeleton from '@codeandfunction/callaloo/CLSkeleton';
</script>

<template>
  <CLSkeleton width="200px" height="20px" rounded />
  <CLSkeleton width="200px" height="20px" :rounded="false" />
</template>

Border Radius

Use the border-radius prop to customize the border radius size.

Common Use Cases

Here are some common patterns for using skeletons:

<script setup lang="ts">
import CLSkeleton from '@codeandfunction/callaloo/CLSkeleton';
import { CLBorderRadius } from '@codeandfunction/callaloo';
</script>

<template>
  <div class="flex-col">
    <CLSkeleton width="60px" height="60px" :border-radius="CLBorderRadius.Full" />
    <CLSkeleton width="100%" height="20px" style="margin-top: 12px;" />
    <CLSkeleton width="80%" height="20px" style="margin-top: 8px;" />
    <CLSkeleton width="90%" height="20px" style="margin-top: 8px;" />
  </div>
</template>

Props