Skeleton

<ahi-skeleton> | AhiSkeleton

deprecated

Skeletons are simple containers for providing a low fidelity layout that mimics what users will see when content has finished loading. They prevent large areas of empty space during asynchronous operations.

This component has been deprecated. Please use the Skeleton display text or the Skeleton body text components instead.

Use multiple skeletons and some clever styles to simulate paragraphs and avatars.

<div class="skeleton">
  <header>
    <ahi-skeleton></ahi-skeleton>
    <ahi-skeleton></ahi-skeleton>
  </header>
  <ahi-skeleton></ahi-skeleton>
  <ahi-skeleton></ahi-skeleton>
  <ahi-skeleton></ahi-skeleton>
</div>

<style>
  .skeleton header {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
  }

  .skeleton header ahi-skeleton:last-child {
    flex: 0 0 auto;
    width: 30%;
    height: 1rem;
  }

  .skeleton ahi-skeleton {
    margin-bottom: 1rem;
  }

  .skeleton ahi-skeleton:nth-child(1)::part(indicator) {
    float: left;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 1rem;
    vertical-align: middle;
    border-radius: var(--ahi-border-radius-pill);
  }

  .skeleton ahi-skeleton:nth-child(3) {
    width: 95%;
  }

  .skeleton ahi-skeleton:nth-child(4) {
    width: 80%;
  }
</style>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/skeleton/skeleton.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/skeleton/skeleton.js';

CSS Parts

Name	Description
`base`	Deprecated. Use the `skeleton` part instead.
`skeleton`	The component’s outer wrapper.
`indicator`	The skeleton’s indicator which is responsible for it’s color.

Learn more about customizing CSS parts.