Skip to content
CodeAtlas UI

Feedback

Skeleton

Loading placeholders that match the shape of the real content.

<script>
  import { Skeleton } from "@codeatlasdev/ui";
</script>

<Skeleton height="20px" width="60%" />
<Skeleton variant="circular" width={48} height={48} />
<Skeleton rows={3} />

Skeletons are aria-hidden. Announce the loading state on the container, for example with aria-busy="true", and leave the placeholders silent.

Text lines

With rows, the last line is shortened to 60% for a natural paragraph.

Code
svelte 
<script lang="ts">
  import { Skeleton, Card, Stack } from '@codeatlasdev/ui';
</script>

<Card material="glass" p="5" full>
  <Stack gap="3">
    <Skeleton height="20px" width="60%" />
    <Skeleton rows={3} height="14px" />
  </Stack>
</Card>

Card layout

Code
svelte 
<script lang="ts">
  import { Skeleton, Card, Stack, Flex } from '@codeatlasdev/ui';
</script>

<Card material="glass" p="5" full>
  <Flex gap="4" align="start">
    <Skeleton variant="circular" width="48px" height="48px" />
    <Stack gap="2">
      <Skeleton height="16px" width="40%" />
      <Skeleton height="13px" width="70%" />
      <Skeleton height="13px" width="55%" />
    </Stack>
  </Flex>
</Card>

Image placeholder

Code
svelte 
<script lang="ts">
  import { Skeleton, Card, Stack } from '@codeatlasdev/ui';
</script>

<Card material="glass" flush full>
  <Skeleton variant="rectangular" height="180px" />
  <div class="caption">
    <Stack gap="2">
      <Skeleton height="16px" width="50%" />
      <Skeleton height="13px" width="80%" />
    </Stack>
  </div>
</Card>

<style>
  .caption { padding: 16px; }
</style>

Props

PropTypeDefaultDescription
variant'text' | 'circular' | 'rectangular' | 'rounded''text'Shape of the placeholder.
widthstring | number–CSS width. Numbers are treated as pixels.
heightstring | number–CSS height. Numbers are treated as pixels.
rowsnumber1Renders several stacked lines. For the text variant the last one is 60% wide.
classstring''Extra CSS classes.