Skeleton List

admin1234
Jan 30, 2026 3
Live Preview

Live Editor

<div class="list">
  <div class="item">
    <div class="skel avatar"></div>
    <div style="flex:1">
      <div class="skel line w70"></div>
      <div class="skel line w50"></div>
    </div>
  </div>

  <div class="item">
    <div class="skel avatar"></div>
    <div style="flex:1">
      <div class="skel line w70"></div>
      <div class="skel line w50"></div>
    </div>
  </div>

  <div class="item">
    <div class="skel avatar"></div>
    <div style="flex:1">
      <div class="skel line w70"></div>
      <div class="skel line w50"></div>
    </div>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#020617;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

.list{
  width:360px;
}

/* item */
.item{
  display:flex;
  gap:14px;
  margin-bottom:18px;
}

.avatar{
  width:48px;
  height:48px;
  border-radius:50%;
}

.line{
  height:14px;
  border-radius:8px;
  margin-bottom:8px;
}

/* skeleton base */
.skel{
  background:#1e293b;
  position:relative;
  overflow:hidden;
}

/* wave */
.skel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );
  animation:wave 1.2s infinite;
}

@keyframes wave{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

/* widths */
.w70{width:70%}
.w50{width:50%}
Categories

Skeleton List

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
