Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Skeleton

Skeleton is a component that displays a loading state for a component.

Basic Usage (Single line skeleton)

Vue

<template>
  <HLSkeleton id="skeleton-1" text />
</template>
<script setup>
  import { HLSkeleton } from '@platform-ui/highrise'
</script>

Multi Lines

Vue

<template>
  <HLSpace :size="10" vertical id="skeleton-2-wrap">
    <HLSkeleton width="70%" height="24px" id="skeleton-2" />
    <HLSkeleton width="100%" height="16px" id="skeleton-3" />
    <HLSkeleton width="90%" height="16px" id="skeleton-4" />
    <HLSkeleton width="80%" height="16px" id="skeleton-5" />
  </HLSpace>
</template>
<script setup>
  import { HLSkeleton, HLSpace } from '@platform-ui/highrise'
</script>

Other Examples

Vue

<template>
  <HLSpace :size="10" vertical id="skeleton-6-wrap">
    <HLSkeleton width="60px" height="60px" id="skeleton-6" />
    <HLSkeleton width="60%" height="24px" id="skeleton-7" />
    <HLSkeleton width="90%" height="16px" :repeat="2" id="skeleton-8" />
  </HLSpace>
</template>
<script setup>
  import { HLSkeleton, HLSpace } from '@platform-ui/highrise'
</script>

Static (non-animated)

Vue

<template>
  <HLSkeleton width="200px" height="24px" :animated="false" id="skeleton-9" />
</template>
<script setup>
  import { HLSkeleton } from '@platform-ui/highrise'
</script>

Non-rounded

Vue

<template>
  <HLSkeleton width="200px" height="24px" :round="false" id="skeleton-10" />
</template>
<script setup>
  import { HLSkeleton } from '@platform-ui/highrise'
</script>

Imports

Vue

import { HLSkeleton } from '@platform-ui/highrise'

Props

Prop	Type	Default	Description
id *	string	undefined	ID of the skeleton
text	boolean	true	Text skeleton
repeat	number	1	Number of times to repeat
width	string | number	'100%'	Width of the skeleton
height	string | number	'18px'	Height of the skeleton
animated	boolean	true	Whether to animate the skeleton
round	boolean	true	Whether to have rounded corners on the skeleton