@finastra/skeleton/demo/index.html

Skeleton Web Component

<script type="module" src="node_modules/@finastra/skeleton/dist/src/skeleton.js"></script>
<style>
  .skeleton-card {
    display: grid;
  }
  .header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
  }
  .content {
    display: flex;
    gap: 16px;
  }
  .info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
  }
</style>
<div class="skeleton-card">
  <div class="header">
    <fds-skeleton type="circle"></fds-skeleton>
    <fds-skeleton></fds-skeleton>
  </div>
  <div class="content">
    <fds-skeleton type="rectangle"></fds-skeleton>
    <div class="info">
      <fds-skeleton size="h2"></fds-skeleton>
      <fds-skeleton size="h3"></fds-skeleton>
      <fds-skeleton size="h5"></fds-skeleton>
      <fds-skeleton width="80px"></fds-skeleton>
    </div>
  </div>
</div>