Giới thiệu

CSS không ngừng làm chúng ta ngạc nhiên. Chỉ với một phần tử, bạn có thể tạo ra các hình xoay, chấm, thanh—và bây giờ, ngay cả loader 3D. Đây là phần cuối cùng của loạt bài Single Element Loaders, và nó nâng cao trải nghiệm lên một tầm cao mới: mô phỏng loader hình khối 3D chỉ bằng các gradient CSS, pseudo-elements và toán học thông minh.

Loader Hình Khối Bị Chia

Ý tưởng rất đơn giản: hiển thị ba mặt của một khối thay vì tất cả sáu mặt. Với một phần tử HTML duy nhất và các pseudo ::before và ::after, bạn có thể tạo ra hai nửa khối chồng lên nhau để trông giống như một khối.

Dưới đây là những mẹo:

Gradient hình nón tạo ảo giác chiều sâu cho mỗi pseudo với các mặt được đổ bóng.
clip-path xác định hình dạng đa giác của mỗi mặt khối.
Margin âm kéo hai nửa lại với nhau một cách liền mạch.
Cuối cùng, một animation keyframe mượt mà làm cho khối nhảy.

css Copy

.loader {
  --s: 150px; 
  --_d: calc(0.353 * var(--s)); 
  width: calc(var(--s) + var(--_d)); 
  aspect-ratio: 1;
  display: flex;
}

.loader::before,
.loader::after {
  content: "";
  flex: 1;
  background: conic-gradient(
    from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0
  );
  clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), 
    calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
  animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
}

.loader::before { margin-right: calc(var(--_d) / -2); }
.loader::after { margin-left: calc(var(--_d) / -2); animation-delay: -.75s; }

@keyframes load {
  0%, 40% { transform: translateY(calc(var(--s) / -4)); }
  60%, 100% { transform: translateY(calc(var(--s) / 4)); }
}

Kết quả: một loader giống như khối nhảy, được hoạt hình 3D—tất cả từ một phần tử duy nhất.

Loader Hình Khối Tiến Trình

Tiếp theo, chúng ta có thể điều chỉnh cùng cấu trúc khối này thành một chỉ báo tiến trình.

Những thay đổi chính:

Sử dụng opacity cho nửa bên phải để mô phỏng chiều sâu.
Thêm một màu trộn cho bên trái để tạo ra ba tông màu từ một màu.
Hoạt hình chiều rộng của bên trái, làm đầy khối dần dần như một thanh tiến trình.
Một gradient dưới hoàn tất ảo giác về đáy của khối.

css Copy

.loader {
  --s: 100px; 
  --_d: calc(0.353*var(--s)); 
  height: var(--s); 
  aspect-ratio: 3;
  display: flex;
  background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;
  clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), 
    calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after {
  content: "";
  clip-path: inherit;
  background: conic-gradient(
    from -90deg at calc(100% - var(--_d)) var(--_d),
    #fff 135deg, #666 0 270deg, #aaa 0
  );
}
.loader::before {
  background-color: #CC333F; 
  background-blend-mode: multiply;
  margin-right: calc(var(--_d) / -2);
  animation: load 2.5s infinite linear;
}
.loader::after {
  flex: 1;
  margin-left: calc(var(--_d) / -2);
  opacity: 0.4;
}

@keyframes load {
  0%, 5% { width: var(--_d); }
  95%, 100% { width: 100%; }
}

Giờ đây, khối được làm đầy như một thanh, hoàn toàn đồng bộ với ảo giác 3D của nó.

Đi Xa Hơn: Mẫu Khối

Nếu một khối không đủ, CSS cho phép bạn tạo ra toàn bộ lưới khối với một phần tử duy nhất. Sử dụng:

Biến CSS để điều khiển kích thước, hàng, cột và khoảng cách.
Một gradient hình nón cho các mặt khối.
Một lớp mặt nạ để cắt ra hình dạng khối.

Từ đó, các hoạt hình như khối trượt hoặc màu sắc nhấp nháy của khối mang lại sự sống động cho ảo giác. Bạn muốn một lưới khối 10×10? Chỉ cần thay đổi --m và --n.

Nhiều Biến Thể

Với cùng các khối xây dựng—pseudo-elements, gradients, clipping, blending, và variables—bạn có thể tạo ra các loader mà:

Nhảy trong 3D
Làm đầy như các thanh tiến trình
Trượt vô tận trên màn hình
Nhấp nháy màu sắc theo thứ tự

Khả năng là vô tận, và tất cả chỉ với một phần tử trong HTML của bạn.

Thực Tiễn Tốt Nhất

Sử dụng CSS variables để dễ dàng thay đổi kích thước và kiểu dáng của loader.
Tối ưu hóa các hiệu ứng hoạt hình để không làm nặng trình duyệt.
Kiểm tra trên nhiều trình duyệt để đảm bảo tính tương thích.

Những Cạm Bẫy Thường Gặp

Quá tải CSS với quá nhiều hiệu ứng có thể ảnh hưởng đến hiệu suất.
Không sử dụng !important nếu không cần thiết, vì điều này có thể làm cho CSS khó quản lý hơn.

Mẹo Hiệu Suất

Sử dụng will-change để thông báo cho trình duyệt về những thay đổi sắp tới, giúp cải thiện hiệu suất hoạt hình.
Giảm số lượng phần tử DOM nếu có thể để tăng tốc độ render.

Khắc Phục Sự Cố

Nếu loader không hoạt động như mong đợi:

Kiểm tra xem các thuộc tính CSS có được áp dụng chính xác không.
Đảm bảo không có vấn đề với chiều cao hoặc chiều rộng của phần tử.

Kết Luận

Từ một spinner đơn giản đến những ảo giác 3D phức tạp, loader với một phần tử chứng minh sức mạnh và tính linh hoạt của CSS. Chỉ với một <div>, bạn có thể xây dựng một cái gì đó phong phú về mặt hình ảnh, có thể mở rộng và tái sử dụng—không cần JavaScript (trừ khi bạn muốn làm cho nó tương tác).

Phần kết thúc 3D này khép lại loạt bài Single Element Loaders, cho thấy rằng đôi khi markup đơn giản nhất có thể mang lại những kết quả ấn tượng nhất.

Tạo Loader 3D Đơn Giản Với CSS