- vừa được xem lúc

Skeleton loader - 10 điểm cho UX

0 0 81

Người đăng: Hoang Van Hung

Theo Viblo Asia

Hi xin chào các bạn, lâu rồi không có chủ đề gì bàn về CSS, trong một ngày thời tiết nóng nực thế này chúng ta sẽ cùng thư giãn với một chút CSS cho mềm mại nhé =)). Chủ đề hôm nay mình muốn giới thiệu đến các bạn đó là hiệu ứng Skeleton khi tải trang. Chắc chắn khi sử dụng các app lớn như Facebook, Youtube,... bạn cũng đã gặp nó rồi.

Skeleton hiểu đơn giản là một bộ khung được định hình trước thay thế cho phần nội dung bạn muốn hiển thị trong thời gian chờ đợi dữ liệu được tải xong. Skeleton giúp tăng trải nghiệm người dùng (UX) và đặc biệt hữu ích trong trường hợp trang/app của bạn có quá nhiều thứ để load và quá nhiều thứ phải chờ đợi. Vậy có cách nào để tự tạo ra Skeleton với vài dòng CSS mà không phải đao to búa lớn động đến các thư viện không ? Có nhé, kéo xuống dưới nha

Cùng xem qua 1 chút demo nhé

Trong ví dụ này, mình sẽ demo Skeleton với 1 dòng chứa title và 1 dòng chứa content (ảnh, text,...) khá giống với Facebook

1. Dựng HTML

Theo mô tả bên trên HTML của chúng ta sẽ như sau

<div class="container"> <div class="placeholder title"></div> <div class="placeholder content"></div>
</div>

Theo đó ta sẽ sử dụng class .placeholder để style cho phần hiệu ứng Skeleton

2. Viết CSS

Trước tiên mình sẽ style cho phần .container chứa Skeleton, phần này thì không quan trọng lắm, tuỳ vào UI đề ra mà bạn sẽ style cho phù hợp với yêu cầu

.container { width: 300px; padding: 10px; background: #eee; margin: auto;
}

Một chút CSS cho phần .title.content

.title { width: 80%; min-height: 20px; margin-bottom: 10px;
} .content { width: 100%; min-height: 60px;
}

Tiếp theo ta sẽ style cho phần .placeholder nơi mà hiệu ứng Skeleton sẽ hoạt động, phần nội dung sẽ như sau

.placeholder { position: relative; overflow: hidden; background: #ccc; border-radius: 3px;
}

Trong đó 2 thuộc tính quan trọng quyết định thành bại đó là position: relative => để style absolute cho phần :after, overflow: hidden ngăn content tràn ra ngoài

Tiếp theo ta sẽ style cho phần :after, phần sẽ nhận nhiệm vụ chạy animation

.placeholder:after{ content: ""; position: absolute; height: 100%; width: 100px; left: -100px; top: 0; background: linear-gradient(to right, transparent, #ffffff70, transparent); animation: reflect 800ms ease-out infinite;
}

Như vậy ta sẽ sử dụng animation chạy với thuộc tính left để hiệu ứng chạy từ trái qua phải với số lần lặp là infinite khi animation được kích hoạt (bạn chú ý đoạn này nhé)

Cuối cùng ta sẽ định nghĩa ra keyframes để chạy animation kia đơn giản như sau

@keyframes reflect { to { left: calc(100% + 100px); }
}

Bùm !!! thế là bạn đã tạo xong rồi đó, tổng kết lại source code sẽ như sau

HTML

<div class="container"> <div class="placeholder title"></div> <div class="placeholder content"></div>
</div>

CSS

.container { width: 300px; padding: 10px; background: #eee; margin: auto;
} .title { width: 80%; min-height: 20px; margin-bottom: 10px;
} .content { width: 100%; min-height: 60px;
} .placeholder { position: relative; overflow: hidden; background: #ccc; border-radius: 3px;
} .placeholder:after{ content: ""; position: absolute; height: 100%; width: 100px; left: -100px; top: 0; background: linear-gradient(to right, transparent, #ffffff70, transparent); animation: reflect 800ms ease-out infinite;
} @keyframes reflect { to { left: calc(100% + 100px); }
}

3. Implement

Tuỳ vào ngôn ngữ bạn đang sử dụng bạn sẽ cần cân nhắc thêm vào cho phù hợp. Mình ví dụ đơn giản với luồng chạy: get data => gán loading true => hiện Skeleton => load xong data => loading = false => ẩn Skeleton => hiện nội dung. Mô tả đơn giản bằng đoạn code react sau

loading ? <Skeleton /> : <Avatar src={data.avatar} />

4. Kết luận

Trên đây mình đã giới thiệu đến các bạn cách tạo ra Skeleton loader đơn giản với vài dòng CSS, trên thực tế có rất nhiều cách khác bạn có thể tham khảo để phục 1 cách tốt nhất cho công việc của bạn

Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công và hẹn gặp lại ở bài viết sau nhé !

Bình luận

Bài viết tương tự

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413

- vừa được xem lúc

2021, chúng ta cần tối ưu hóa việc tải hình ảnh trên web như nào?

Rất chào các bạn,. Như các bạn đã biết, trong kỉ nguyên công nghệ, song song với sự sinh ra dày đặc của các trang web mới cũng là sự biến mất của những trang web "lạc hậu" hay hoạt động kém hiệu quả.

0 0 43

- vừa được xem lúc

Xóa phần tử trong Array JavaScript

Xóa phần tử trong Array JavaScript là một bài toán mà hầu hết mọi người đều gặp phải khi lập trình JavaScript. Để giải quyết bài toán này, JavaScript cung cấp rất nhiều giải pháp khác nhau.

0 0 35

- vừa được xem lúc

Bài 28 - Hiểu chính xác về Responsive Web Design và cách chia khoảng màn hình

Chào các bạn, thuật ngữ Responsive Web Design có lẽ không còn xa lạ gì với mọi người nữa. Bất kỳ ai làm về web đều đã từng làm hoặc ít nhất là nghe tới thuật ngữ Responsive Web Design này.

0 0 139

- vừa được xem lúc

Giới thiệu về Mixins trong Vuejs

Xin chào năm mới năm me! Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn những vấn đề liên quan đến Vuejs. Ở bài trước mình đã giới thiệu về tính năng Filter và lần này, mình xin chia sẻ với các bạn về một khái niệm cũng rất quen thuộc.

0 0 376

- vừa được xem lúc

Top JavaScript Snippets bạn nên thử một lần cho biết

Chào các bạn, tiếp tục chuỗi chủ đề về JS hôm nay mình xin chia sẻ tới các bạn một số đoạn snippets hay ho giúp chúng ta tăng hiệu suất công việc, cải thiện chất lượng code. Cùng bắt đầu nhé (go). . 1.

0 0 25