Trình tạo Loader CSS

Trình tạo Loader CSS là gì?

Trình tạo Loader CSS là một công cụ miễn phí chạy trong trình duyệt dành cho nhà thiết kế web và lập trình viên front-end cần một chỉ báo tải bằng CSS thuần mà không phải thêm thư viện. Chọn một trong năm kiểu - spinner, vòng, chấm, thanh và pulse - rồi kiểm soát kích thước theo pixel, màu chính, tốc độ của một chu kỳ hoạt ảnh theo giây, độ dày nét và số lượng chấm hoặc thanh. Bản xem trước trực tiếp chuyển động khi bạn chỉnh sửa, và đoạn mã HTML cùng khối style CSS có @keyframes cập nhật tức thì để bạn đặt thẳng vào trang. Dùng nó cho nút bấm, loader trang, trạng thái khung xương và chỗ giữ chỗ bất đồng bộ, hoặc để học cách hoạt ảnh CSS và @keyframes điều khiển từng hiệu ứng.

Cách sử dụng Trình tạo Loader CSS

1. Chọn một kiểu loader: Spinner, Vòng, Chấm, Thanh hoặc Pulse.
2. Đặt kích thước theo pixel và chọn màu bằng ô mẫu hoặc bằng cách nhập một giá trị.
3. Đặt tốc độ hoạt ảnh theo giây cho một chu kỳ đầy đủ.
4. Mở Cài đặt để điều chỉnh độ dày nét (spinner và vòng) hoặc số lượng chấm hay thanh.
5. Xem bản xem trước trực tiếp chuyển động, rồi sao chép HTML và CSS đã tạo bằng nút sao chép.

Ví dụ

Kiểu: Spinner, kích thước 48px, màu #4f86f7, tốc độ 1s, độ dày 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

Kiểu: Chấm, kích thước 48px, màu #9333ea, tốc độ 1s, số lượng 3

<div class="dd-loader"><div></div><div></div><div></div></div> với animation-delay so le để các chấm phóng to thu nhỏ theo làn sóng.

Câu hỏi thường gặp

Có những kiểu loader nào?

Năm kiểu: Spinner (một cung xoay), Vòng (một vòng xoay dày hơn), Chấm (các chấm phóng to thu nhỏ theo làn sóng), Thanh (các thanh co giãn lên xuống) và Pulse (một vòng tròn đập nhịp). Đổi bằng menu kiểu và bản xem trước cùng mã cập nhật tức thì.

Các điều khiển kích thước, màu sắc và tốc độ làm gì?

Kích thước đặt số đo pixel của loader, màu sắc đặt màu chính (dùng bộ chọn ô mẫu hoặc nhập bất kỳ màu CSS nào), và tốc độ là thời lượng của một chu kỳ hoạt ảnh theo giây. Độ dày kiểm soát nét của spinner và vòng, trong khi số lượng kiểm soát số chấm hoặc thanh xuất hiện.

CSS được tạo có phải là CSS thuần không có JavaScript không?

Đúng vậy. Đoạn mã là HTML thường cộng với một khối <style> dùng hoạt ảnh CSS và @keyframes, nên nó chạy mà không cần bất kỳ JavaScript hay thư viện bên ngoài nào. Dán vào trang của bạn và nó tự hoạt động.

Tại sao độ dày và số lượng không thay đổi mọi kiểu?

Độ dày chỉ ảnh hưởng đến spinner và vòng (vẽ một viền), còn số lượng chỉ ảnh hưởng đến chấm và thanh (kết xuất nhiều phần tử). Các kiểu khác bỏ qua chúng, nên đầu ra vẫn gọn gàng cho kiểu bạn đã chọn.

Có gì được tải lên máy chủ không?

Không. Loader và CSS của nó được dựng hoàn toàn trong trình duyệt của bạn bằng phép tính chuỗi cục bộ - không có cài đặt, màu sắc hay mã nào được gửi đến máy chủ, nên nó hoạt động ngoại tuyến và giữ riêng tư công việc của bạn.