<skeleton-placeholder>

None

<skeleton-placeholder effect="none"></skeleton-placeholder>

Wave

<skeleton-placeholder effect="wave"></skeleton-placeholder>

Fade

<skeleton-placeholder effect="fade"></skeleton-placeholder>

Circle

<skeleton-placeholder variant="circle" style="width:60px; height:60px;"></skeleton-placeholder>

Rect

<skeleton-placeholder variant="rect"></skeleton-placeholder>

Pill

<skeleton-placeholder variant="pill"></skeleton-placeholder>

<skeleton-placeholder
  effect="wave"
  style="--color:pink; --wave-color:#dd98a4; --border-radius:2px;"
></skeleton-placeholder>

<style>
  .media {
    display: flex;
    gap: 1rem;
  }

  .media-body {
    flex: 1;
  }

  .avatar-skeleton {
    width: 80px;
    height: 80px;
  }

  .title-skeleton {
    max-width: 200px;
    margin-bottom: 1rem;
  }

  .text-skeleton {
    margin-bottom: 0.5rem;
  }

  .button-skeleton {
    max-width: 150px;
    height: 35px;
  }
</style>

<div class="media">
  <skeleton-placeholder
    effect="wave"
    variant="circle"
    class="avatar-skeleton"
  ></skeleton-placeholder>

  <div class="media-body">
    <skeleton-placeholder effect="wave" class="title-skeleton"></skeleton-placeholder>
    <skeleton-placeholder effect="wave" class="text-skeleton"></skeleton-placeholder>
    <skeleton-placeholder effect="wave" class="text-skeleton"></skeleton-placeholder>
    <skeleton-placeholder effect="wave" class="button-skeleton"></skeleton-placeholder>
  </div>
</div>

<style>
  skeleton-placeholder::part(placeholder) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<skeleton-placeholder
  variant="circle"
  style="width:80px; height:80px;"
>
  <img src="image.svg" alt="Person">
</skeleton-placeholder>