Trình Tạo Loader CSS

Công Cụ Này Là Gì?

Loader CSS là một phần tử hoạt ảnh nhỏ — vòng xoay, chấm nảy, vòng tròn nhấp nháy hoặc thanh tiến trình di chuyển — dùng để báo hiệu nội dung đang được tải, không cần vòng lặp hoạt ảnh JavaScript và không cần hình ảnh hay GIF. Nó được tạo từ một vài quy tắc CSS cộng với khối @keyframes định nghĩa cách phần tử thay đổi theo thời gian.

Công cụ này tạo ra bốn kiểu loader phổ biến với CSS thật, hoạt động được: spinner xoay dựa trên border, ba chấm nảy lần lượt, vòng tròn nhấp nháy vào ra, và thanh tiến trình có phần lấp đầy trượt. Điều chỉnh kích thước, màu sắc và thời lượng trên bản xem trước trực tiếp, sau đó sao chép CSS được tạo ra cùng với phần tử HTML tối thiểu mà nó áp dụng.

Nguồn: CSS Animations Level 1, W3C — đặc tả định nghĩa @keyframes và các thuộc tính hoạt ảnh mà những loader này được xây dựng từ đó.

Tại Sao Nên Dùng?

• Bản xem trước trực tiếp hoạt hình theo thời gian thực khi bạn thay đổi kiểu, kích thước, màu sắc hoặc tốc độ — bạn thấy chính xác thứ mình sẽ dùng.
• Tạo ra CSS đầy đủ bao gồm cả khối @keyframes, không chỉ là một đoạn bạn phải tự hoàn thiện.
• Cũng xuất ra chính xác mã HTML mà CSS cần, không phải đoán tên class hay cấu trúc phần tử.
• Bốn kiểu hoạt ảnh khác nhau (spinner, chấm, nhấp nháy, thanh) bao phủ hầu hết các trường hợp trạng thái tải phổ biến.
• Hoạt ảnh CSS thuần túy — không cần JavaScript, không cần tệp hình ảnh, nhẹ và mượt hơn ảnh GIF động.
• Chạy hoàn toàn trong trình duyệt, miễn phí, không cần đăng ký.

Cách Sử Dụng

1. Chọn kiểu loader: vòng xoay, chấm nảy, vòng tròn nhấp nháy hoặc thanh tiến trình.
2. Kéo thanh trượt kích thước để phóng to hoặc thu nhỏ loader.
3. Chọn một màu — màu này sẽ trở thành màu nhấn của loader (viền xoay, các chấm, hoặc phần lấp đầy của thanh).
4. Điều chỉnh tốc độ để hoạt ảnh nhanh hơn hoặc chậm hơn; hầu hết loader giao diện trông đẹp nhất trong khoảng 0,6s đến 1,5s mỗi chu kỳ.
5. Sao chép CSS được tạo ra vào stylesheet của bạn và dán đoạn HTML vào nơi cần hiển thị loader.

Ví dụ

Đầu vào

Kiểu: vòng xoay · Kích thước: 40px · Màu: cam · Tốc độ: 1,0s

Đầu ra

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

Một spinner dạng vòng kinh điển: một hình tròn có viền gần như trong suốt ở ba cạnh và màu đặc ở cạnh thứ tư, xoay liên tục với hoạt ảnh tuyến tính, vô hạn.

Vì sao dùng loader CSS thay vì GIF động

Spinner GIF động từng là lựa chọn mặc định trong nhiều năm, nhưng ngày nay loader CSS gần như luôn là lựa chọn tốt hơn: chỉ vài trăm byte văn bản thay vì một tệp hình ảnh nhị phân, có thể phóng to thu nhỏ tùy ý mà không bị vỡ hạt vì được vẽ bằng border và transform, và màu sắc có thể đổi ngay lập tức chỉ với một giá trị CSS thay vì phải xuất lại hình ảnh mới.

Bốn kiểu ở đây — spinner, chấm, nhấp nháy, thanh — cũng là những kiểu xuất hiện phổ biến nhất trong giao diện thực tế, từ trạng thái tải trong nút bấm đến lớp phủ toàn trang. Mỗi kiểu chỉ thay đổi transform và opacity trong keyframes, điều mà trình duyệt có thể hoạt hình mượt mà trên GPU mà không làm giật phần còn lại của trang.

Chọn kiểu phù hợp với tình huống

• Vòng xoay: lựa chọn trung tính, đa dụng nhất — phù hợp bên trong nút bấm và các trạng thái tải nhỏ trên cùng dòng.
• Chấm nảy: tạo cảm giác nhẹ nhàng, vui nhộn hơn; thường dùng cho chỉ báo 'đang nhập...' trong chat và các lần chờ ngắn.
• Vòng tròn nhấp nháy: phù hợp làm chỉ báo tải cho một phần tử duy nhất hoặc làm chấm trạng thái 'đang hoạt động/trực tiếp'.
• Thanh tiến trình: ngụ ý sự tiến triển và thường được mong đợi khi tải trang hoặc trong các quy trình nhiều bước, ngay cả khi không có tỷ lệ phần trăm chính xác.

Sử dụng loader trong dự án của bạn

Dán CSS được tạo ra một lần vào stylesheet, sau đó tái sử dụng đoạn HTML ở bất cứ đâu bạn cần trạng thái tải — bên trong nút bấm khi gửi biểu mẫu, phía trên thẻ khi đang lấy dữ liệu, hoặc căn giữa trong lớp phủ toàn trang. Vì hoạt ảnh là CSS thuần túy, việc bật tắt nó đơn giản như thêm hoặc xóa phần tử khỏi DOM, hoặc ẩn nó bằng display: none.

→ Trình Tạo Box Shadow · Rút Gọn CSS

Câu Hỏi Thường Gặp