Tạo Loading CSS cho Spinner và Hiệu Ứng Tải Trang
Công cụ tạo loading CSS biến 43 mẫu được dựng tay sẵn thành các hiệu ứng tải sẵn-sao-chép, nên bạn không bao giờ phải tự viết keyframes từ đầu. Duyệt thư viện, chỉnh màu, kích thước, tốc độ rồi sao chép HTML và CSS gọn gàng cho dự án của mình.
Công cụ được làm cho lập trình viên front-end và designer cần một biểu tượng tải nhanh, không phụ thuộc thư viện — spinner, chấm, thanh, nhịp, thanh tiến trình hay một hình khối động. Mọi mẫu đều là CSS thuần, nên không cần JavaScript, không cần ảnh, và không phải cài thư viện nào.
Cách Tạo Loader CSS
Duyệt và chọn một loader
Dùng các tab nhóm — Tất cả, Spinner, Dots, Bars, Pulse, Progress và Hình khối — để lọc thư viện. Mỗi ảnh thu nhỏ chạy hoạt ảnh trực tiếp, nên hãy nhấn vào mẫu bạn thích, hoặc bấm Ngẫu nhiên để nhảy sang một lựa chọn mới.
Tùy chỉnh màu, kích thước và tốc độ
Mở bảng chọn màu để đặt màu loader bất kỳ, kéo thanh trượt Kích thước từ 20px đến 120px, và đặt Tốc độ (thời lượng hoạt ảnh) từ 0.3s đến 3.0s. Bản xem trước cập nhật tức thì theo từng thay đổi.
Kiểm tra trên mọi nền
Chuyển bản xem trước giữa nền Sáng, Tối và Trong suốt. Nền trong suốt dạng ô caro giúp bạn xác nhận loader nằm gọn gàng trên trang mà không dính nền thừa.
Sao chép HTML và CSS
Chuyển qua lại giữa tab HTML và CSS rồi nhấn Sao chép. Phần CSS đã gắn sẵn đúng màu, kích thước pixel và thời lượng của bạn, nên chỉ cần dán markup vào trang và style vào stylesheet — xong.
Tính Năng
43 Mẫu Loader Chọn Lọc
Bộ sưu tập dựng tay bao quát từ vòng xoay đơn giản đến khối lập phương 3D động, mỗi mẫu đều sẵn sàng đưa thẳng vào production.
Sáu Nhóm Loader
Lọc theo Spinner, Dots, Bars, Pulse, Progress hoặc Hình khối, hoặc xem tất cả trong một thư viện để tìm nhanh phong cách phù hợp.
Thư Viện Chạy Hoạt Ảnh
Mỗi ảnh thu nhỏ trong lưới chạy đúng hoạt ảnh thật, nên bạn xem được từng loader đang chuyển động trước khi chốt chọn.
Bảng Chọn Màu
Khớp với thương hiệu bằng cách đặt màu loader tùy ý, áp dụng cho mọi phần của hoạt ảnh cùng lúc.
Điều Chỉnh Kích Thước và Tốc Độ
Co giãn loader từ 20px đến 120px và tinh chỉnh thời lượng hoạt ảnh từ nhanh 0.3s đến chậm 3.0s.
Xem Trước Nền Sáng, Tối và Trong Suốt
Đổi nền xem trước để kiểm chứng loader vẫn hiển thị rõ và sạch sẽ trong mọi ngữ cảnh trang.
Tách Riêng Tab HTML và CSS
Mã được chia thành phần markup tối giản và phần style, để bạn dán mỗi phần đúng vào chỗ của nó.
Kết Quả Sẵn Dùng
CSS tạo ra dùng giá trị đã quy đổi — pixel, màu và thời lượng cụ thể — thay vì biến, dán là chạy mà không cần thiết lập thêm.
Sao Chép Một Chạm
Sao chép thẳng tab HTML hoặc CSS đang mở vào bộ nhớ tạm chỉ bằng một nút bấm kèm thông báo xác nhận rõ ràng.
Chọn Loader Ngẫu Nhiên
Nhấn Ngẫu nhiên để lập tức nhảy sang một loader khác trong nhóm bạn đang xem, gợi cảm hứng nhanh chóng.
CSS Thuần, Không JavaScript
Mọi loader chỉ chạy bằng CSS keyframes — không script và không ảnh — nên luôn nhẹ và nhanh.
Bố Cục Linh Hoạt
Thư viện, bản xem trước và bảng mã tự co theo màn hình, nên dùng giống nhau trên cả máy tính và điện thoại.
Câu Hỏi Thường Gặp
Làm sao tạo spinner tải bằng CSS?
Chọn một mẫu trong thư viện, chỉnh màu, kích thước và tốc độ theo ý, rồi sao chép tab HTML và CSS vào dự án. Hoạt ảnh spinner bắt đầu chạy ngay khi bạn dán markup vào trang và style vào stylesheet.
Có làm được spinner bằng CSS thuần, không JavaScript không?
Có. Mọi loader ở đây đều được dựng hoàn toàn từ hoạt ảnh CSS @keyframes. Bạn chỉ cần markup HTML và style CSS — không cần JavaScript và không cần ảnh nào để hoạt ảnh chạy.
Làm sao đổi màu và tốc độ spinner?
Dùng các điều khiển trong công cụ: bảng chọn màu đặt màu loader, còn thanh trượt Tốc độ đặt thời lượng hoạt ảnh từ 0.3s đến 3.0s. Sau khi sao chép, bạn vẫn có thể sửa giá trị trong CSS — tìm màu (ví dụ #6366f1) hoặc thời lượng tính bằng giây và đổi trực tiếp.
Làm sao căn giữa spinner trên trang?
Bọc loader trong một khung cao toàn phần và dùng flexbox, ví dụ display: flex; align-items: center; justify-content: center; kèm min-height đặt bằng vùng bạn muốn lấp đầy. Để phủ toàn màn hình, đặt khung đó với position: fixed; inset: 0; để spinner nằm giữa khung nhìn.
Loader và spinner khác nhau thế nào?
"Loader" là tên chung cho mọi biểu tượng tải, còn "spinner" là một dạng phổ biến — một vòng hoặc cung tròn xoay. Công cụ này bao gồm cả hai: nhóm Spinner chứa các loader xoay cổ điển, còn các nhóm Dots, Bars, Pulse, Progress và Hình khối cho bạn những phong cách tải khác cho cùng mục đích.
Có đổi được màu loader sau khi sao chép mã không?
Có. CSS tạo ra dùng một giá trị màu cụ thể, nên bạn có thể tìm và thay nó trong CSS bất cứ lúc nào. Để dễ tùy biến theme, hãy đổi màu đó sang một biến CSS như var(--loader-color) và điều khiển từ một nơi duy nhất.
Các loader này chạy trên trình duyệt nào?
Mọi loader đều chạy trên các trình duyệt hiện đại gồm Chrome, Firefox, Safari và Edge. Chúng dựa trên các tính năng CSS được hỗ trợ rộng rãi như @keyframes, border-radius và transform.
Các loader có dùng miễn phí cho dự án thương mại không?
Có. Đoạn CSS bạn sao chép là của bạn để dùng trong mọi dự án, kể cả công việc thương mại, mà không cần ghi nguồn.
Chưa có bình luận nào. Hãy là người đầu tiên!