Bộ xương CSS

Trong bài đăng này, chúng ta sẽ đi sâu vào từng bước triển khai thực tế của bộ tải khung. Bài đầu tiên của loạt bài này tập trung vào việc cung cấp một cái nhìn tổng quan về skeleton loader, mục đích, cách sử dụng và những điểm cần lưu ý khi thiết kế. Nếu bạn vẫn chưa chắc chắn về khái niệm, hãy tham khảo Skeleton Loader. Tổng quan, mục đích, cách sử dụng và thiết kế

Các bước liên quan

• Thiết kế nền
• Thiết kế một gradient
• Độ dốc sinh động
• Trình tải hiển thị chỉ dành cho trình giữ chỗ trống
• hoàn thành thực hiện

Thiết kế nền

Chúng tôi phải giữ nền cho trình giữ chỗ nơi nội dung chưa được tải. Các trình giữ chỗ trực quan này phải có màu xám nhạt hoặc màu trung tính

Thực hiện nền

A. Tạo một phần để tải nội dung

B. Tạo_______0_______ bên trong phần đó để thêm móc vào văn bản. Đã gán một lớp “skeleton-loader-background” cho kiểu nền

C. Chỉ định background với màu xám nhạt

Skeleton Loader BackgroundThiết kế một gradient

Triển khai Gradient

A. Tạo một phần, khoảng cách để thêm móc và gán một lớp “skeleton-loader-gradient” để tạo kiểu gradient

B. Chỉ định hướng và mẫu của linear-gradient. Ở đây, gradient sẽ được áp dụng từ trái sang phải. Nó bao gồm màu trắng với độ mờ 0% [trong suốt] ở phần đầu, độ mờ 50% ở giữa và độ mờ 80% ở cuối. Ngoài ra, nền chứa hai giá trị được phân tách bằng dấu phẩy. Theo thông số kỹ thuật, các giá trị được xếp chồng lên nhau theo chiều dọc. Giá trị đầu tiên vẫn ở trên cùng và giá trị khác đi xuống từ đó

C. Lặp lại gradient theo chiều dọc i. e. trên trục Y

D. Chỉ định kích thước của gradient i. e. chiều rộng và chiều cao

E. Đặt vị trí của gradient để bắt đầu i. e. 0 0

Skeleton Loader GradientAnimate gradient

Chuyển động đóng vai trò quan trọng trong các ứng dụng. Nó có thể giúp làm cho giao diện biểu cảm và trực quan hơn. Đối với bộ tải khung, chúng ta phải tạo hiệu ứng chuyển màu từ đầu bên trái nhất về phía bên phải

Khi nghĩ về chuyển động, chúng ta nên nhắm đến một khoảng thời gian thích hợp. Nếu nó chậm, nó khiến người dùng cảm thấy họ đang chờ đợi nhiều hơn thực tế. Nếu nó khá nhanh, nó mang lại một nhận thức xấu
Chúng tôi phải giữ sự cân bằng phù hợp giữa tốc độ, hướng và độ giãn để mang lại trải nghiệm hiệu quả

Chúng tôi có một nền màu xám nhạt và độ dốc được thiết kế. Tiếp theo, chúng ta phải tạo hiệu ứng chuyển màu từ trái sang phải, lặp đi lặp lại một cách dễ dàng

Thực hiện hoạt ảnh

A. Tạo một phần, khoảng cách để thêm móc và chỉ định một lớp "bộ tải khung" để tạo kiểu gradient

B. Chỉ định độ dốc và nền màu xám nhạt cho trình tải

C. Chỉ định tên animation, thời lượng và số lần lặp lại

D. Sử dụng quy tắc keyframes, chỉ định cách hoạt ảnh sẽ dần dần thay đổi từ kiểu hiện tại sang kiểu mới vào những thời điểm nhất định. Tại đây, nó sẽ thay đổi vị trí nền từ trái sang phải [0 đến 100%]

Skeleton Loader AnimationHiển thị trình tải chỉ dành cho trình giữ chỗ trống

A. Bộ chọn :empty khớp với mọi phần tử không có phần tử con hoặc nút văn bản. Tại đây, nó sẽ chỉ hiển thị bộ tải khung khi nội dung chưa được tải

hoàn thành thực hiện

Skeleton Loader — Thực hiện đầy đủ

Ở đây, chúng tôi đã thiết kế ô sản phẩm chứa hình ảnh, tên sản phẩm và mô tả sản phẩm. Chúng tôi đang tìm nạp nội dung thông qua API trực tiếp bằng JavaScript

A. DOMContentLoaded sẽ bị kích hoạt khi tải HTML DOM. Chúng tôi sẽ thực hiện các thao tác JavaScript khi nhận được sự kiện này

B. Truy cập các phần tử thông qua HTML DOM API

C. Lấy dữ liệu từ API trực tiếp. Ở đây, chúng tôi đang sử dụng API giả để tìm nạp chi tiết sản phẩm [https. // fakestoreapi. com/sản phẩm/1]

D. Điền vào các phần tử HTML với nội dung phù hợp

Skeleton Loader — Trực quan

Bạn cũng có thể xem video của tôi mô tả thiết kế Skeleton Loader theo các bước được đề cập ở trên

dòng dưới cùng

Khi làm việc với hoạt ảnh, thoạt nhìn có vẻ đòi hỏi khắt khe. Tuy nhiên, việc triển khai chúng không quá khó so với trải nghiệm mà nó mang lại

Bộ xương CSS là gì?

Làm cách nào để tạo khung tải bằng CSS?

Mã khung của HTML là gì?