CSS - Loader: Hướng dẫn入门 tạo hiệu ứng tải động

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ cùng bước vào thế giới kỳ diệu của CSS loaders. Là người thầy thân thiện trong khu phố máy tính, tôi rất vui được dẫn dắt các bạn trong hành trình này. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra những hiệu ứng tải hấp dẫn, giúp trang web của bạn trông chuyên nghiệp và thu hút. Hãy bắt đầu nào!

CSS Loaders là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu rõ CSS loaders là gì và tại sao chúng lại quan trọng. Bạn có bao giờ truy cập một trang web và thấy một vòng tròn quay hoặc một chấm nhảy trong khi chờ nội dung tải không? Đó chính là loader! Những animation này cung cấp phản hồi thị giác cho người dùng, cho họ biết rằng có điều gì đó đang xảy ra phía sau hậu trường. Đó như thể nói với khách truy cập của bạn, "Hãy chờ một chút, chúng tôi đang chuẩn bị mọi thứ cho bạn!"

Tạo loader đầu tiên

Bây giờ, hãy c rolled up our sleeves và tạo loader đầu tiên của chúng ta. Chúng ta sẽ bắt đầu với điều gì đó đơn giản và từ từ tăng độ phức tạp.

CSS Loaders - Ví dụ cơ bản

Dưới đây là một loader cơ bản tạo ra một vòng tròn quay:

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

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Hãy phân tích này:

1. Chúng ta tạo một <div> element với class "loader".
2. Trong CSS của chúng ta, chúng ta style div này thành một hình tròn bằng border-radius: 50%.
3. Chúng ta cho nó một viền màu xám nhạt (#f3f3f3) trên tất cả các bên, ngoại trừ bên trên, là màu xanh (#3498db).
4. Thuộc tính animation thiết lập hiệu ứng quay của chúng ta:

• spin là tên của animation.
• 2s có nghĩa là animation mất 2 giây để hoàn thành.
• linear có nghĩa là tốc độ animation là đều.
• infinite có nghĩa là nó sẽ tiếp tục lặp lại.

5. Quy tắc @keyframes định nghĩa những gì xảy ra trong animation. Chúng ta quay từ 0 đến 360 độ.

Và voilà! Bạn đã tạo ra loader đầu tiên của mình. Có phải rất thú vị không?

CSS Loaders - Với thuộc tính border-right

Bây giờ, hãy thử một cách tiếp cận hơi khác một chút. Chúng ta sẽ tạo một loader có vẻ như nó đang "điền đầy" theo chiều kim đồng hồ:

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

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Sự khác biệt chính ở đây là chúng ta đã thêm border-right: 16px solid #3498db;. Điều này tạo ra một loader có vẻ như đang đầy lên khi quay. Nó như xem một kim đồng hồ di chuyển, phải không?

CSS Loaders - Với :before và :after

Bây giờ, hãy nâng cấp và tạo một loader phức tạp hơn sử dụng các pseudo-element :before và :after. Điều này sẽ cho chúng ta một hiệu ứng "đôi vòng tròn" rất cool:

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

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Loader này tạo ra hai vòng tròn quay:

1. Vòng tròn ngoài (:before) quay với viền trên màu xanh.
2. Vòng tròn trong (:after) nhỏ hơn một chút, có viền trên màu đỏ, và bắt đầu quay nửa giây sau.

Kết quả là một hiệu ứng đôi vòng tròn mê hoặc. Thật tuyệt vời phải không?

CSS Loaders - Với linear-gradient

Đối với thủ thuật cuối cùng, hãy tạo một loader sử dụng linear-gradient. Điều này sẽ cho chúng ta một hiệu ứng chuyển đổi màu sắc mượt mà:

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

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Loader này sử dụng một trick thông minh:

1. Chúng ta tạo một vòng tròn với gradient từ xanh đến xám.
2. Chúng ta thêm một vòng tròn trắng trên đầu bằng pseudo-element :before.
3. Khi vòng tròn ngoài quay, nó tạo ra ảo giác của một animation tải mượt mà.

Tóm tắt các phương pháp loader

Dưới đây là bảng tham khảo nhanh các phương pháp chúng ta đã xem xét:

Phương pháp	Mô tả	Thuộc tính chính
Ví dụ cơ bản	Vòng tròn quay đơn giản	border, border-radius, animation
Border-right	Hiệu ứng đầy theo chiều kim đồng hồ	border, border-right
:before và :after	Hiệu ứng đôi vòng tròn	:before, :after, animation-delay
Linear-gradient	Chuyển đổi màu sắc mượt mà	linear-gradient, :before

Và thế là xong! Bạn đã học bốn cách khác nhau để tạo CSS loaders. Nhớ rằng những này chỉ là điểm khởi đầu - hãy tự do thử nghiệm với màu sắc, kích thước và animation để tạo ra loader độc đáo của riêng bạn.

Khi chúng ta kết thúc, tôi muốn chia sẻ một câu chuyện nhanh. Khi tôi lần đầu tiên dạy CSS, tôi có một học sinh rất frustrate với loaders. Anh ấy nói, "Tại sao phải phiền toái? Người dùng không thích chờ đợi anyway!" Nhưng sau đó anh ấy tạo ra loader đầu tiên của mình, và ánh sáng trong mắt anh ấy sáng lên. Anh ấy nhận ra rằng ngay cả một khoảng thời gian chờ đợi ngắn cũng có thể biến thành một trải nghiệm thú vị với animation đúng. Đó là sức mạnh của CSS loaders - chúng biến chờ đợi thành sự tò mò.

Vậy, hãy tiến lên và tạo ra! Thử nghiệm với các kỹ thuật này, kết hợp chúng và quan trọng nhất, hãy vui vẻ. Nhớ rằng, trong thế giới phát triển web, sáng tạo là bạn tốt nhất của bạn. Chúc các bạn may mắn và cho đến lần gặp lại, hãy để những loader của bạn quay!

Credits: Image by storyset