Máy xúc lật một phần tử: Các thanh

Chúng tôi đã xem xét người quay. Chúng tôi đã xem xét các dấu chấm. Bây giờ chúng ta sẽ giải quyết một mẫu phổ biến khác cho bộ tải: thanh. Và chúng ta sẽ làm điều tương tự trong bài viết thứ ba này của loạt bài này như chúng ta có những bài khác bằng cách làm cho nó chỉ với một phần tử và với CSS linh hoạt giúp dễ dàng tạo các biến thể.

Hãy bắt đầu với không phải một, không phải hai, mà là 20 ví dụ về máy tải thanh.

Gì?! Bạn có định chi tiết từng người trong số họ không? Đó là quá nhiều cho một bài báo!

Thoạt nhìn có vẻ như vậy! Nhưng tất cả chúng đều dựa trên cùng một cấu trúc mã và chúng tôi chỉ cập nhật một vài giá trị để tạo ra các biến thể. Đó là tất cả sức mạnh của CSS. Chúng tôi không học cách tạo một bộ tải, nhưng chúng tôi học các kỹ thuật khác nhau cho phép chúng tôi tạo nhiều bộ tải như chúng tôi muốn bằng cách sử dụng cùng một cấu trúc mã.

Hãy làm một số thanh!

Chúng tôi bắt đầu bằng cách xác định các thứ nguyên cho chúng bằng cách sử dụng width (Hoặc height) với aspect-ratio để duy trì tỷ trọng:

.bars { width: 45px; aspect-ratio: 1;
}

Chúng tôi sắp xếp ba thanh "giả" với gradient tuyến tính trên nền - rất giống với cách chúng tôi tạo bộ tải điểm trong Phần 2 của loạt bài này.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Đoạn mã trên sẽ cho chúng ta kết quả sau:

Giống như các bài viết khác trong loạt bài này, chúng ta sẽ đề cập đến rất nhiều background thủ đoạn. Vì vậy, nếu bạn cảm thấy như chúng ta nhảy xung quanh quá nhanh hoặc cảm thấy bạn cần thêm một chút chi tiết, vui lòng kiểm tra những điều đó. Bạn cũng có thể đọc của tôi Câu trả lời Stack Overflow mà tôi đưa ra một lời giải thích chi tiết về cách tất cả điều này hoạt động.

Hoạt hình các thanh

Chúng tôi tạo hiệu ứng cho kích thước hoặc vị trí của phần tử để tạo bộ tải thanh. Hãy tạo kích thước hoạt ảnh bằng cách xác định các khung hình ảnh động sau:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Xem những gì đang xảy ra ở đó? Trong khoảng từ 0% đến 100%, hoạt ảnh thay đổi background-size của gradient nền của phần tử. Mỗi khung hình chính đặt ba kích thước nền (một kích thước cho mỗi gradient).

Và đây là những gì chúng tôi nhận được:

Bạn có thể bắt đầu tưởng tượng tất cả các biến thể có thể có mà chúng ta có thể nhận được bằng cách chơi với các cấu hình hoạt ảnh khác nhau cho các kích thước hoặc vị trí không?

Hãy sửa kích thước thành 20% 50% và cập nhật các vị trí lần này:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

… Giúp chúng ta có một bộ nạp khác!

Bây giờ có lẽ bạn đã nắm được thủ thuật. Tất cả những gì bạn cần là xác định mốc thời gian mà bạn chuyển thành khung hình chính. Bằng cách tạo hoạt ảnh cho kích thước, vị trí - hoặc cả hai! - có vô số khả năng trình tải trong tầm tay của chúng tôi.

Và một khi chúng tôi cảm thấy thoải mái với kỹ thuật như vậy, chúng tôi có thể tiến xa hơn và sử dụng một gradient phức tạp hơn để tạo ra chi tiết máy xúc.

Mong đợi đối với hai ví dụ cuối cùng trong bản trình diễn đó, tất cả các trình tải thanh đều sử dụng cùng một kiểu đánh dấu và kiểu cơ bản cũng như các kết hợp khác nhau của hình ảnh động. Mở mã và cố gắng hình dung từng khung một cách độc lập; bạn sẽ thấy việc kiếm được hàng tá - nếu không phải hàng trăm - của các biến thể.

Bắt mắt

Bạn có nhớ thủ thuật mặt nạ mà chúng tôi đã làm với bộ tải chấm trong bài viết thứ hai của loạt bài này? Chúng tôi có thể làm điều tương tự ở đây!

Nếu chúng ta áp dụng tất cả logic ở trên bên trong mask thuộc tính, chúng tôi có thể sử dụng bất kỳ cấu hình nền nào để thêm màu sắc ưa thích cho bộ tải của chúng tôi.

Hãy xem một bản demo và cập nhật nó:

Tất cả những gì tôi đã làm là cập nhật tất cả background-* với mask-* và tôi đã thêm một màu chuyển sắc. Chỉ đơn giản như vậy nhưng chúng tôi nhận được một trình tải mát khác.

Vì vậy, không có sự khác biệt giữa các dấu chấm và các thanh?

Không khác nhau! Tôi đã viết hai bài báo khác nhau để bao gồm nhiều ví dụ nhất có thể nhưng trong cả hai, tôi đều dựa trên các kỹ thuật giống nhau:

1. Gradients để tạo ra các hình dạng (dấu chấm hoặc thanh hoặc có thể là thứ gì đó khác)
2. Hoạt hình background-size và / hoặc background-position để tạo hoạt ảnh của trình tải
3. Thêm mặt nạ để thêm màu sắc

Làm tròn các thanh

Lần này chúng ta hãy thử một cái gì đó khác, nơi chúng ta có thể làm tròn các cạnh của thanh của chúng ta.

Sử dụng một phần tử và phần tử của nó ::before và ::after giả, chúng tôi xác định ba thanh giống hệt nhau:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Điều đó cung cấp cho chúng tôi ba thanh, lần này mà không cần dựa vào gradient tuyến tính:

Bây giờ, mẹo là điền vào các thanh đó với một gradient đáng yêu. Để mô phỏng một gradient liên tục, chúng ta cần sử dụng background đặc tính. Trong hình trên, vùng màu xanh lá cây xác định vùng được bao phủ bởi bộ nạp. Diện tích đó phải là kích thước của gradient và, nếu chúng ta làm phép toán, nó bằng cách nhân cả hai cạnh được gắn nhãn S trong sơ đồ, hoặc background-size: var(--s) var(--s).

Vì các phần tử của chúng tôi được đặt riêng lẻ, chúng tôi cần cập nhật vị trí của gradient bên trong mỗi phần tử để đảm bảo tất cả chúng trùng nhau. Bằng cách này, chúng tôi đang mô phỏng một gradient liên tục mặc dù nó thực sự là ba trong số chúng.

Đối với yếu tố chính (được đặt ở trung tâm), nền cần phải ở trung tâm. Chúng tôi sử dụng những thứ sau:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Đối với phần tử giả ở bên trái, chúng ta cần nền ở bên trái

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Và đối với giả ở bên phải, nền cần được đặt ở bên phải:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Sử dụng cùng một biến CSS, --_i, mà chúng tôi đã sử dụng để dịch, chúng tôi có thể viết mã như sau:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Bây giờ, tất cả những gì chúng ta phải làm là chỉnh sửa chiều cao và thêm một số độ trễ! Dưới đây là ba ví dụ mà tất cả những gì khác biệt là màu sắc và kích thước:

Kết thúc

Tôi hy vọng cho đến nay bạn đang cảm thấy được khuyến khích bởi tất cả sức mạnh mà bạn có để tạo ra các hình ảnh động tải phức tạp. Tất cả những gì chúng ta cần là một phần tử, hoặc gradient hoặc giả để vẽ các thanh, sau đó là một số khung hình chính để di chuyển mọi thứ xung quanh. Đó là toàn bộ công thức để có được vô số khả năng, vì vậy hãy ra ngoài và bắt đầu nấu nướng một số thứ gọn gàng!

Cho đến bài viết tiếp theo, tôi sẽ để lại cho bạn một bộ sưu tập vui nhộn về bộ nạp mà tôi đang kết hợp các dấu chấm và Những quán bar!

---

Máy xúc lật một phần tử: Các thanh ban đầu được xuất bản trên CSS-Thủ thuật. Bạn nên nhận bản tin.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. TRUY CẬP MIỄN PHÍ.
• CryptoHawk. Radar Altcoin. Dùng thử miễn phí.
• Nguồn: https://css-tricks.com/single-element-loaders-the-bars/