Loading Skeleton: Giả lập nội dung như Facebook bằng HTML, CSS và JS

Loading Skeleton là kỹ thuật hiển thị khung xám mô phỏng nội dung trong lúc dữ liệu thật đang tải về. Thay vì vòng xoay chờ, skeleton giữ nguyên bố cục, giúp người dùng cảm giác trang phản hồi nhanh hơn. Trong bài này, chúng ta sẽ xây dựng skeleton đơn giản với HTML, CSS và một chút JavaScript.

Bước 1: Tạo cấu trúc HTML

Chúng ta cần một container bao gồm hai lớp: skeleton và nội dung thật. Khi dữ liệu đang tải, skeleton hiện; khi dữ liệu sẵn sàng, lớp thật xuất hiện.

<div class="im-skeleton is-loading">
  <!-- Layer Skeleton -->
  <div class="skeleton" aria-hidden="true">
    <div class="row">
      <div class="avatar"></div>
      <div class="lines">
        <div class="text w-70"></div>
        <div class="text w-50"></div>
      </div>
    </div>
    <div class="thumb"></div>
  </div>

  <!-- Layer Nội dung thật -->
  <div class="real">
    <div class="post">
      <header>
        <img class="avatar" data-preload="avatar.jpg" alt="Avatar" />
        <div>
          <h2>Tiêu đề bài viết</h2>
          <div class="meta">Tác giả • 2 phút trước</div>
        </div>
      </header>
      <p>Đây là đoạn mô tả nội dung thật thay cho skeleton.</p>
      <img class="thumb" data-preload="thumb.jpg" alt="Ảnh minh họa" />
    </div>
  </div>
</div>

Bước 2: Viết CSS cho skeleton

CSS sẽ định dạng các khối xám và tạo hiệu ứng shimmer. Chúng ta cũng cần ẩn/hiện hai lớp theo trạng thái is-loading và is-loaded.

.im-skeleton.is-loading .skeleton { display: block; }
.im-skeleton.is-loading .real { display: none; }
.im-skeleton.is-loaded .skeleton { display: none; }
.im-skeleton.is-loaded .real { display: block; }

.skeleton .avatar,
.skeleton .text,
.skeleton .thumb {
  background: #e6e6e6;
  position: relative;
  overflow: hidden;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton .avatar::after,
.skeleton .text::after,
.skeleton .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #f5f5f5, transparent);
  animation: shimmer 1.2s infinite;
  opacity: 0.6;
}

Bước 3: Thêm JavaScript để giả lập tải dữ liệu

Chúng ta sẽ viết JS nhỏ để delay vài giây, sau đó đổi trạng thái sang is-loaded.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const container = document.querySelector(".im-skeleton");
  setTimeout(() => {
    container.classList.remove("is-loading");
    container.classList.add("is-loaded");
  }, 1500); // giả lập 1.5s tải dữ liệu
});
</script>

Kết quả

Khi mở trang, skeleton xuất hiện trước. Sau 1.5 giây, skeleton biến mất và nội dung thật hiển thị. Đây chính là trải nghiệm quen thuộc trên Facebook, YouTube và nhiều ứng dụng hiện đại.

Demo trực tiếp

Tiêu đề bài viết mẫu

Tác giả • 2 phút trước

Đây là đoạn mô tả ngắn gọn để thay thế skeleton khi dữ liệu sẵn sàng. Bạn có thể bind dữ liệu thực từ API.

Reload Skeleton