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

Tạo các trình tải chỉ có CSS ​​là một trong những nhiệm vụ yêu thích của tôi. Thật thỏa mãn khi nhìn vào những hình ảnh động vô tận đó. Và tất nhiên, có rất nhiều về kỹ thuật và cách tiếp cận để tạo ra chúng - không cần nhìn xa hơn CodePen để xem có bao nhiêu. Tuy nhiên, trong bài viết này, chúng ta sẽ xem cách tạo một trình tải phần tử duy nhất viết ít mã nhất có thể.

Tôi có đã tạo ra một bộ sưu tập hơn 500 bộ tải div đơn và trong loạt bài gồm bốn phần này, tôi sẽ chia sẻ những thủ thuật mà tôi đã sử dụng để tạo ra nhiều thủ thuật như vậy. Chúng tôi sẽ đề cập đến một số lượng lớn các ví dụ, cho thấy những điều chỉnh nhỏ có thể dẫn đến các biến thể thú vị như thế nào và chúng ta cần viết ít mã như thế nào để biến tất cả thành hiện thực!

Đối với bài viết đầu tiên này, chúng tôi sẽ tạo một trong những mẫu trình tải phổ biến hơn: thanh quay:

Đây là cách tiếp cận

Một cách triển khai đơn giản cho trình tải này là tạo một phần tử cho mỗi thanh được gói bên trong phần tử cha (cho tổng số chín phần tử), sau đó chơi với opacity và transform để có được hiệu ứng quay.

Tuy nhiên, việc triển khai của tôi chỉ yêu cầu một yếu tố:

<div class="loader"></div>

…và 10 khai báo CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Hãy chia nhỏ nó ra

Thoạt nhìn, đoạn mã này có thể trông lạ nhưng bạn sẽ thấy nó đơn giản hơn những gì bạn nghĩ. Bước đầu tiên là xác định kích thước của phần tử. Trong trường hợp của chúng tôi, đó là một 150px quảng trường. Chúng ta có thể đặt aspect-ratio để sử dụng sao cho phần tử vẫn vuông bất kể điều gì.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Khi xây dựng trình tải CSS, tôi luôn cố gắng có một giá trị để kiểm soát kích thước tổng thể. Trong trường hợp này, đó là width và tất cả các phép tính mà chúng tôi đề cập sẽ đề cập đến giá trị đó. Điều này cho phép tôi thay đổi một giá trị duy nhất để điều khiển bộ tải. Điều quan trọng là có thể dễ dàng điều chỉnh kích thước của bộ tải mà không cần điều chỉnh nhiều giá trị bổ sung.

Tiếp theo, chúng ta sẽ sử dụng gradient để tạo các thanh. Đây là phần khó nhất! Hãy sử dụng một độ dốc để tạo hai thanh như sau:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Độ dốc của chúng tôi được xác định bằng một màu và hai điểm dừng màu. Kết quả là một màu đồng nhất không bị phai hoặc chuyển màu. Kích thước bằng 34% rộng và 8% cao. Nó cũng được đặt ở trung tâm (50%). Bí quyết là việc sử dụng giá trị từ khóa space — thao tác này sẽ nhân đôi độ dốc, mang lại cho chúng ta tổng cộng hai thanh.

Từ các đặc điểm kỹ thuật:

Hình ảnh được lặp lại thường xuyên để vừa với khu vực định vị nền mà không bị cắt bớt và sau đó các hình ảnh được giãn cách để lấp đầy khu vực đó. Hình ảnh đầu tiên và cuối cùng chạm vào các cạnh của khu vực.

Tôi đang sử dụng chiều rộng bằng 34% có nghĩa là chúng ta không thể có nhiều hơn hai thanh (3*34% lớn hơn 100%) nhưng với hai thanh chúng ta sẽ có khoảng trống (100% - 2 * 34% = 32%). Khoảng trống đó được đặt ở giữa hai thanh. Nói cách khác, chúng tôi sử dụng chiều rộng cho độ dốc nằm giữa 33% và 50% để đảm bảo chúng ta có ít nhất hai thanh có khoảng cách nhỏ giữa chúng. Giá trị space là nơi đặt chúng một cách chính xác cho chúng ta.

Chúng tôi làm tương tự và tạo một gradient tương tự thứ hai để có thêm hai thanh ở trên cùng và dưới cùng, điều này mang lại cho chúng tôi một background giá trị tài sản của:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Chúng ta có thể tối ưu hóa điều đó bằng cách sử dụng biến CSS để tránh lặp lại:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Vì vậy, bây giờ chúng ta có bốn thanh và nhờ các biến CSS, chúng ta có thể viết giá trị màu một lần để dễ dàng cập nhật sau này (giống như chúng ta đã làm với kích thước của trình tải).

Để tạo các thanh còn lại, hãy nhấn vào .loader phần tử và nó ::before phần tử giả để có thêm bốn thanh nữa với tổng số là tám thanh.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Lưu ý việc sử dụng display: grid. Điều này cho phép chúng tôi dựa vào mặc định của lưới stretch căn chỉnh để làm cho phần tử giả bao phủ toàn bộ khu vực phần tử mẹ của nó; do đó không cần chỉ định thứ nguyên trên đó - một thủ thuật khác giúp giảm mã và tránh cho chúng ta phải xử lý nhiều giá trị!

Bây giờ hãy xoay phần tử giả bằng cách 45deg để định vị các thanh còn lại. Di chuột vào bản demo sau để xem thủ thuật:

Đặt độ mờ

Điều chúng tôi đang cố gắng làm là tạo ấn tượng rằng có một thanh để lại vệt các thanh mờ dần phía sau khi nó di chuyển theo một đường tròn. Điều chúng ta cần bây giờ là tận dụng độ trong suốt của các thanh để tạo ra dấu vết đó, điều mà chúng ta sẽ thực hiện với CSS mask kết hợp với đường conic-gradient như sau:

mask: conic-gradient(from 22deg,#0003,#000);

Để hiểu rõ hơn về thủ thuật này, hãy áp dụng điều này cho một hộp đầy màu sắc:

Độ trong suốt của màu đỏ tăng dần theo chiều kim đồng hồ. Chúng tôi áp dụng điều này cho trình tải của mình và chúng tôi có các thanh có độ mờ khác nhau:

Trong thực tế, mỗi thanh dường như mờ đi vì nó bị che bởi một dải màu chuyển màu và nằm giữa hai màu bán trong suốt. Hầu như không đáng chú ý khi điều này chạy, vì vậy nó giống như có thể nói rằng tất cả các thanh đều có cùng màu với mức độ mờ khác nhau.

Vòng quay

Hãy áp dụng hoạt ảnh xoay để tải trình tải của chúng tôi. Lưu ý rằng chúng ta cần hoạt ảnh từng bước chứ không phải hoạt ảnh liên tục, đó là lý do tại sao tôi đang sử dụng steps(8). 8 không có gì ngoài số lượng thanh, do đó giá trị đó có thể thay đổi tùy thuộc vào số lượng thanh được sử dụng.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Đó là nó! Chúng tôi có trình tải chỉ có một phần tử và một vài dòng CSS. Chúng ta có thể dễ dàng kiểm soát kích thước và màu sắc của nó bằng cách điều chỉnh một giá trị.

Vì chúng tôi chỉ sử dụng ::before phần tử giả, chúng ta có thể thêm bốn thanh nữa bằng cách sử dụng ::after để kết thúc với tổng cộng 12 ô nhịp và mã gần như giống nhau:

Chúng tôi cập nhật vòng xoay của các phần tử giả để xem xét 30deg và 60deg thay vì 45deg trong khi sử dụng hoạt ảnh mười hai bước thay vì tám bước. Tôi cũng giảm chiều cao xuống 5% thay vì 8% để làm cho các thanh mỏng hơn một chút.

Cũng lưu ý rằng chúng ta có grid-area: 1/1 trên các phần tử giả. Điều này cho phép chúng ta đặt chúng trong cùng một khu vực với nhau, xếp chồng lên nhau.

Đoán xem cái gì? Chúng ta có thể tiếp cận cùng một trình tải bằng cách sử dụng cách triển khai khác:

Bạn có thể tìm ra logic đằng sau đoạn mã này không? Đây là một gợi ý: độ mờ không còn được xử lý bằng CSS nữa mask nhưng bên trong gradient và cũng đang sử dụng opacity bất động sản.

Tại sao không thay vào đó là dấu chấm?

Chúng ta hoàn toàn có thể làm được điều đó:

Nếu bạn kiểm tra mã, bạn sẽ thấy rằng chúng ta hiện đang làm việc với gradient hướng tâm thay vì gradient tuyến tính. Mặt khác, khái niệm này hoàn toàn giống nhau ở chỗ mặt nạ tạo ấn tượng về độ mờ, nhưng chúng tôi đã tạo các hình dạng dưới dạng hình tròn thay vì đường thẳng.

Dưới đây là hình minh họa cấu hình gradient mới:

Nếu bạn đang sử dụng Safari, hãy lưu ý rằng bản demo có thể có lỗi. Đó là vì Safari hiện thiếu hỗ trợ cho at cú pháp theo độ dốc xuyên tâm. Nhưng chúng ta có thể cấu hình lại gradient một chút để khắc phục điều đó:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Thêm ví dụ về trình tải

Đây là một ý tưởng khác cho trình tải spinner tương tự như ý tưởng trước đó.

Đối với điều này, tôi chỉ dựa vào background và mask để tạo hình dạng (không cần phần tử giả). Tôi cũng đang xác định cấu hình với các biến CSS để có thể tạo ra nhiều biến thể từ cùng một mã - một ví dụ khác về sức mạnh của biến CSS. Tôi đã viết một bài viết khác về kỹ thuật này nếu bạn muốn biết thêm chi tiết.

Lưu ý rằng một số trình duyệt vẫn dựa vào -webkit- tiền tố cho mask-composite với bộ giá trị riêng và sẽ không hiển thị vòng quay trong bản demo. Đây là một cách để làm điều đó không có mast-composite để được hỗ trợ thêm về trình duyệt.

Tôi có một cái khác cho bạn:

Đối với điều này, tôi đang sử dụng một background-color để kiểm soát màu sắc và sử dụng mask và mask-composite để tạo hình dạng cuối cùng:

Trước khi chúng ta kết thúc, đây là một số bộ tải kéo sợi khác mà tôi đã tạo cách đây một thời gian. Tôi đang dựa vào các kỹ thuật khác nhau nhưng vẫn sử dụng độ dốc, mặt nạ, phần tử giả, v.v. Có thể là một bài tập tốt để tìm ra logic của từng kỹ thuật và đồng thời học các thủ thuật mới. Điều này cho biết, nếu bạn có bất kỳ câu hỏi nào về họ, phần bình luận sẽ ở bên dưới.

Kết thúc

Hãy xem, có rất nhiều thứ chúng ta có thể làm trong CSS mà không cần gì ngoài một div, một vài gradient, phần tử giả, biến. Có vẻ như chúng tôi đã tạo ra rất nhiều bộ tải kéo sợi khác nhau, nhưng về cơ bản chúng đều giống nhau với một số sửa đổi nhỏ.

Đây chỉ là sự khởi đầu. Trong loạt bài này, chúng ta sẽ xem xét thêm các ý tưởng và khái niệm nâng cao để tạo trình tải CSS.

---

Máy xúc lật một phần tử: Con quay 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-spinner/