Máy nạp phần tử đơn: The Dots

Chúng tôi đang xem xét các trình tải trong loạt bài này. Hơn thế nữa, chúng tôi đang chia nhỏ một số mẫu trình tải phổ biến và cách tạo lại chúng bằng một div duy nhất. Cho đến nay, chúng tôi đã tách ra máy tải kéo sợi cổ điển. Bây giờ, hãy xem xét một cái khác mà bạn có thể biết rõ: các dấu chấm.

Máy tải chấm có ở khắp nơi. Chúng gọn gàng vì chúng thường bao gồm ba dấu chấm giống như một dấu chấm lửng trên văn bản (…) nhảy xung quanh.

Mục tiêu của chúng tôi ở đây là tạo ra điều tương tự từ một phần tử div duy nhất. Nói cách khác, không có một div trên mỗi dấu chấm hoặc các hoạt ảnh riêng lẻ cho mỗi dấu chấm.

Ví dụ về trình tải ở trên được tạo bằng một phần tử div duy nhất, một vài khai báo CSS và không có phần tử giả. Tôi đang kết hợp hai kỹ thuật bằng cách sử dụng CSS background và mask. Và khi chúng ta hoàn thành, chúng ta sẽ xem cách tạo hoạt ảnh cho một gradient nền giúp tạo ra ảo giác về mỗi chấm thay đổi màu sắc khi chúng di chuyển lên và xuống liên tiếp.

Hoạt hình nền

Hãy bắt đầu với hoạt ảnh nền:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Tôi hy vọng điều này trông khá đơn giản. Những gì chúng tôi có là một 180px-rộng .loader phần tử hiển thị hai gradient hình nón thể hiện màu cứng dừng giữa hai màu mỗi màu - gradient đầu tiên là đỏ và xanh lam dọc theo nửa trên của .loader, và gradient thứ hai có màu xanh lá cây và màu tím dọc theo nửa dưới.

Cách kích thước nền của trình tải (200% rộng), chúng tôi chỉ nhìn thấy một trong những màu đó trong mỗi nửa tại một thời điểm. Sau đó, chúng ta có hoạt ảnh nhỏ này đẩy vị trí của các gradient nền đó sang trái, phải và trở lại mãi mãi.

Khi xử lý các thuộc tính nền - đặc biệt là background-position - Tôi luôn đề cập đến Câu trả lời Stack Overflow mà tôi đang giải thích chi tiết về cách tất cả điều này hoạt động. Nếu bạn không thoải mái với thủ thuật nền CSS, tôi thực sự khuyên bạn nên đọc câu trả lời đó để giúp giải quyết vấn đề tiếp theo.

Trong hoạt ảnh, lưu ý rằng lớp đầu tiên là Y=0% (đặt ở trên cùng) trong khi X là những thay đổi từ 0% đến 100%. Đối với lớp thứ hai, chúng ta cũng có X nhưng Y=100% (đặt ở dưới cùng).

Tại sao sử dụng conic-gradient() thay vì linear-gradient()?

Câu hỏi hay! Theo trực giác, chúng ta nên sử dụng một gradient tuyến tính để tạo ra một gradient hai màu như sau:

linear-gradient(90deg, red 50%, blue 0)

Nhưng chúng ta cũng có thể đạt được điều tương tự bằng cách sử dụng conic-gradient() - và với ít mã hơn. Chúng tôi giảm mã và cũng học một thủ thuật mới trong quá trình này!

Trượt màu sang trái và phải là một cách hay để làm cho nó trông giống như chúng ta đang thay đổi màu sắc, nhưng sẽ tốt hơn nếu chúng ta thay đổi màu ngay lập tức - theo cách đó, sẽ không có cơ hội để một chấm của bộ nạp nhấp nháy hai màu cùng một lúc . Để làm điều này, hãy thay đổi animationchức năng thời gian của từ linear đến steps(1)

Các dấu chấm của trình nạp

Nếu bạn theo dõi cùng với bài viết đầu tiên trong loạt bài này, Tôi cá là bạn biết điều gì xảy ra tiếp theo: Mặt nạ CSS! Điều khiến mặt nạ trở nên tuyệt vời là chúng cho phép chúng ta "Cắt bỏ" các phần của nền trong hình dạng của một phần tử khác. Vì vậy, trong trường hợp này, chúng tôi muốn tạo một vài dấu chấm, hiển thị độ dốc của nền qua các dấu chấm và cắt bỏ bất kỳ phần nào của nền không phải là một phần của dấu chấm.

Chúng tôi sẽ sử dụng radial-gradient() cho điều này:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Có một số mã trùng lặp trong đó, vì vậy hãy tạo một biến CSS để thu gọn mọi thứ:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Mát lạnh. Nhưng bây giờ chúng ta cần một hoạt ảnh mới giúp di chuyển các chấm lên và xuống giữa các gradient động.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Vâng, đó là tổng cộng ba gradient xuyên tâm trong đó, tất cả đều có cùng cấu hình và cùng kích thước - hoạt ảnh sẽ cập nhật vị trí của từng gradient. Lưu ý rằng X tọa độ của mỗi dấu chấm là cố định. Các mask-position được định nghĩa sao cho dấu chấm đầu tiên ở bên trái (0%), cái thứ hai ở trung tâm (50%), và cái thứ ba ở bên phải (100%). Chúng tôi chỉ cập nhật Y phối hợp từ 0% đến 100% để làm cho các dấu chấm nhảy múa.

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

Bây giờ, hãy kết hợp điều này với hoạt ảnh gradient của chúng tôi và điều kỳ diệu bắt đầu xảy ra:

Các biến thể của bộ tải chấm

Biến CSS mà chúng tôi đã thực hiện trong ví dụ cuối cùng giúp cho việc hoán đổi màu mới và tạo nhiều biến thể hơn của cùng một bộ tải trở nên dễ dàng hơn nhiều. Ví dụ, các màu và kích thước khác nhau:

Còn một chuyển động khác cho các dấu chấm của chúng ta thì sao?

Ở đây, tất cả những gì tôi đã làm là cập nhật hoạt ảnh để xem xét các vị trí khác nhau và chúng tôi nhận được một trình tải khác có cùng cấu trúc mã!

Kỹ thuật hoạt hình mà tôi đã sử dụng cho các lớp mặt nạ cũng có thể được sử dụng với các lớp nền để tạo ra nhiều bộ tải khác nhau với một màu duy nhất. Tôi đã viết một bài báo chi tiết về điều này. Bạn sẽ thấy rằng từ cùng một cấu trúc mã, chúng ta có thể tạo ra các biến thể khác nhau bằng cách thay đổi một vài giá trị. Tôi đang chia sẻ một vài ví dụ ở cuối bài viết.

Tại sao không phải là một trình tải với một dấu chấm?

Điều này sẽ khá dễ hiểu vì tôi đang sử dụng cùng một kỹ thuật nhưng với một logic đơn giản hơn:

Đây là một ví dụ khác về trình tải mà tôi cũng đang tạo hoạt ảnh radial-gradient kết hợp với Bộ lọc CSS và mix-blend-mode để tạo hiệu ứng đốm màu:

Nếu bạn kiểm tra mã, bạn sẽ thấy rằng tất cả những gì tôi thực sự đang làm ở đó là tạo hoạt ảnh background-position, giống hệt như chúng tôi đã làm với trình tải trước đó, nhưng thêm một dấu gạch ngang background-size để làm cho nó trông giống như đốm màu lớn hơn khi nó hấp thụ các chấm.

Nếu bạn muốn hiểu điều kỳ diệu đằng sau hiệu ứng đốm màu đó, bạn có thể tham khảo những trang trình bày tương tác này (Chỉ dành cho Chrome) bởi Ana Tudor bởi vì cô ấy bao quát chủ đề quá tốt!

Đây là một ý tưởng trình tải chấm khác, lần này sử dụng một kỹ thuật khác:

Đây chỉ là 10 khai báo CSS và một khung hình chính. Phần tử chính và hai phần tử giả của nó có cùng cấu hình nền với một gradient xuyên tâm. Mỗi người tạo một dấu chấm, tổng cộng là ba. Hoạt ảnh di chuyển gradient từ trên xuống dưới bằng cách sử dụng các độ trễ khác nhau cho mỗi chấm ..

Ồ, và hãy lưu ý cách bản trình diễn này sử dụng CSS Grid. Điều này cho phép chúng tôi tận dụng mặc định của lưới stretch căn chỉnh sao cho cả hai phần tử giả đều bao phủ toàn bộ khu vực gốc của chúng. Không cần định cỡ! Đẩy mạnh xung quanh một chút với translate() và chúng tôi đã sẵn sàng.

Thêm ví dụ!

Chỉ để đưa điểm về nhà, tôi muốn để lại cho bạn một loạt các ví dụ bổ sung thực sự là các biến thể của những gì chúng ta đã xem xét. Khi bạn xem các bản trình diễn, bạn sẽ thấy rằng các phương pháp tiếp cận mà chúng tôi đề cập ở đây là siêu linh hoạt và mở ra rất nhiều khả năng thiết kế.

Tiếp theo…

OK, vì vậy chúng tôi đã đề cập đến các trình tải chấm trong bài viết này và các trình quay trong bài viết cuối cùng. Trong phần tiếp theo của loạt bài gồm bốn phần này, chúng ta sẽ chuyển sự chú ý đến một loại trình nạp phổ biến khác: Những quán bar. Chúng tôi sẽ tiếp thu rất nhiều những gì chúng tôi đã học được cho đến nay và xem cách chúng tôi có thể mở rộng chúng để tạo thêm một trình tải phần tử đơn lẻ khác với ít mã nhất và càng linh hoạt càng tốt.

---

Máy nạp phần tử đơn: The Dots 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-dots/