Chúng tôi đang xem xét các bộ 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 chỉ với một div duy nhất. Cho đến nay, chúng tôi đã chọn bộ nạp quay cổ điển. Bây giờ, hãy xem một cái khác mà bạn có thể biết rõ. dấu chấm
Trình tải dấu chấm ở khắp mọi nơi. Chúng gọn gàng vì chúng thường bao gồm ba dấu chấm trông giống như dấu chấm lửng văn bản […] nhảy múa xung quanh
Loạt bài viết
- Bộ tải đơn phần tử. người quay
- Bộ tải đơn phần tử. Các dấu chấm - bạn đang ở đây
- Bộ tải đơn phần tử. Những quán bar
- Bộ tải đơn phần tử. Đi 3D
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 cho mỗi dấu chấm hoặc hoạt ảnh riêng lẻ cho mỗi dấu chấm
Dự phòng nhúng CodePen
Ví dụ về trình tải ở trên được tạo với 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 sử dụng CSS
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Hoạt hình nền
Hãy bắt đầu với hoạt hì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 có vẻ khá đơn giản. Những gì chúng tôi có là một phần tử
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Cách nền của trình tải có kích thước [rộng ___10], chúng tôi chỉ nhìn thấy một trong những màu đó ở mỗi nửa tại một thời điểm. Sau đó, chúng tôi có hoạt hình nhỏ này đẩy vị trí của các chuyển màu nền đó sang trái, phải và ngược lại mãi mãi
Khi xử lý các thuộc tính nền - đặc biệt là
linear-gradient[90deg, red 50%, blue 0]Trong hình ảnh động, lưu ý rằng lớp đầu tiên là
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Dự phòng nhúng CodePen
Tại sao lại sử dụng
8 thay vìlinear-gradient[90deg, red 50%, blue 0]9?linear-gradient[90deg, red 50%, blue 0]
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ư thế này
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
linear-gradient[90deg, red 50%, blue 0]Trượt các 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ó khả năng chấm tải nhấp nháy hai màu cùng lúc. Để làm điều này, hãy thay đổi chức năng thời gian của
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Dự phòng nhúng CodePen
Các dấu chấm tải
Nếu bạn đã theo dõ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ì sẽ xảy ra tiếp theo. mặt nạ CSS. Điều làm cho 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 theo hình dạng của một yếu 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
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]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ứ
linear-gradient[90deg, red 50%, blue 0]mát mẻ. Nhưng bây giờ chúng ta cần một hoạt ảnh mới giúp di chuyển các dấu chấm lên và xuống giữa các chuyển sắc hoạt hình
linear-gradient[90deg, red 50%, blue 0]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 cái. Lưu ý rằng tọa độ
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Đây là những gì chúng tôi nhận được
Dự phòng nhúng CodePen
Bây giờ, hãy kết hợp điều này với hoạt ảnh chuyển màu của chúng tôi và điều kỳ diệu bắt đầu xảy ra
Dự phòng nhúng CodePen
Các biến thể của trình tải dấu chấm
Biến CSS mà chúng tôi đã tạo trong ví dụ trước giúp việc hoán đổi màu mới dễ dàng hơn nhiều và tạo nhiều biến thể hơn của cùng một trình tải. Ví dụ, màu sắc và kích cỡ khác nhau
Dự phòng nhúng CodePen
Còn một phong trào khác cho các dấu chấm của chúng ta thì sao?
Dự phòng nhúng CodePen
Ở đâ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 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 viết 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 chỉ 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à trình tải có một dấu chấm?
Dự phòng nhúng CodePen
Cái này khá dễ mò mẫm vì tôi đang sử dụng kỹ thuật tương tự nhưng với logic đơn giản hơn
Dự phòng nhúng CodePen
Đây là một ví dụ khác về trình tải mà tôi cũng đang tạo hiệu ứng động
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Dự phòng nhúng CodePen
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 cho
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]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 các slide tương tác này [chỉ dành cho Chrome] của Ana Tudor vì cô ấy bao quát chủ đề rất tốt
Đây là một ý tưởng trình tải dấu chấm khác, lần này sử dụng một kỹ thuật khác
Dự phòng nhúng CodePen
Cái này chỉ có 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 ra một dấu chấm, tổng cộng là ba. Hoạt hình di chuyển dải màu từ trên xuống dưới bằng cách sử dụng các độ trễ khác nhau cho mỗi dấu chấm
Ồ, và 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 căn chỉnh
linear-gradient[90deg, red 50%, blue 0]linear-gradient[90deg, red 50%, blue 0]Thêm ví dụ
Chỉ để đưa vấn đề 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 mà chúng tôi đề cập ở đây cực kỳ linh hoạt và mở ra vô số khả năng thiết kế
Dự phòng nhúng CodePen
Dự phòng nhúng CodePen
Dự phòng nhúng CodePen
Dự phòng nhúng CodePen
Dự phòng nhúng CodePen
Tiếp theo…
OK, vì vậy chúng tôi đã đề cập đến trình tải dấu chấm trong bài viết này và trình quay vòng 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ẽ chú ý đến một loại trình tải phổ biến khác. Những quán bar. Chúng ta sẽ tiếp thu nhiều kiến thức đã học được cho đến nay và xem cách chúng ta 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 mã ít nhất và tính linh hoạt cao nhất có thể