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 aria-busy="true") rather than on each placeholder.

Text lines

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

Code

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

<GlassCard padding="20px" full>
  <Stack gap={12}>
    <Skeleton height="20px" width="60%" />
    <Skeleton rows={3} height="14px" />
  </Stack>
</GlassCard>

Card layout

Code

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

<GlassCard padding="20px" full>
  <Row gap={16} align="start">
    <Skeleton variant="circular" width="48px" height="48px" />
    <Stack gap={8}>
      <Skeleton height="16px" width="40%" />
      <Skeleton height="13px" width="70%" />
      <Skeleton height="13px" width="55%" />
    </Stack>
  </Row>
</GlassCard>

Image placeholder

Code

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

<GlassCard flush full>
  <Skeleton variant="rectangular" height="180px" />
  <div class="caption">
    <Stack gap={8}>
      <Skeleton height="16px" width="50%" />
      <Skeleton height="13px" width="80%" />
    </Stack>
  </div>
</GlassCard>

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

Props

Prop	Type	Default	Description
`variant`	`'text' \| 'circular' \| 'rectangular' \| 'rounded'`	`'text'`	Shape of the placeholder.
`width`	`string \| number`	–	CSS width. Numbers are treated as pixels.
`height`	`string \| number`	–	CSS height. Numbers are treated as pixels.
`rows`	`number`	`1`	Renders several stacked lines. For the text variant the last one is 60% wide.
`class`	`string`	`''`	Extra CSS classes.