Trình Tạo Loader CSS
Trình tạo loader CSS miễn phí: mười spinner tải trang bằng CSS thuần, điều chỉnh trực tiếp kích thước, tốc độ, độ dày và màu, rồi sao chép HTML và CSS dán ngay được.
Trình tạo loader CSS tạo ra gì?
Nó dựng các chỉ báo tải có chuyển động bằng CSS thuần: vòng xoay, chấm, thanh, sóng lan, xung, quỹ đạo, lật, sóng, nảy và vòng gradient. Mỗi loader được sinh theo kích thước, tốc độ, độ dày và màu bạn chọn, sẵn sàng sao chép dưới dạng HTML kèm CSS.
Loader có cần JavaScript hay hình ảnh không?
Không. Mỗi loader chỉ là các phần tử HTML thông thường được chuyển động bằng keyframes CSS. Không hình ảnh, không font biểu tượng, không thư viện, không script chạy nền — riêng khối CSS là đủ.
Làm sao thêm loader vào trang của tôi?
Nhấp một loader trong lưới, dán khối HTML vào nơi cần hiển thị, rồi dán khối CSS vào stylesheet. CSS tự chứa và đã kèm các quy tắc @keyframes cần thiết.
Bốn tham số thay đổi điều gì?
Kích thước đặt chiều rộng và cao của mọi loader, Tốc độ đổi thời lượng chuyển động, Độ dày ảnh hưởng viền và độ rộng thanh, còn Màu tô lại ngay lập tức mọi phần tử trong lưới và trong mã.
Sao loader đã sao chép không chạy?
Nguyên nhân thường nhất là chỉ sao chép quy tắc lớp mà thiếu khối @keyframes, hoặc đổi tên lớp ở HTML mà không đổi ở CSS. Hãy chép cả hai khối như đã sinh và giữ nguyên tên lớp.
Hiệu năng chuyển động thế nào?
Rất tốt. Mọi loader chỉ chuyển động transform và opacity — thuộc tính trình duyệt ghép trên GPU, không gây layout hay vẽ lại, nên vẫn mượt dù một trang có nhiều loader.
Loader có thân thiện với trợ năng không?
Spinner là trang trí trực quan nên trình đọc màn hình cần gợi ý chữ. Thêm nhãn ẩn như "Đang tải" cạnh loader, hoặc đặt aria-hidden="true" cho loader và thông báo tiến trình riêng.
Có dữ liệu nào gửi lên máy chủ không?
Không. Bộ tạo chạy hoàn toàn trong trình duyệt. Cài đặt của bạn không rời trang, mã được sinh ra cũng lắp ráp cục bộ trên thiết bị.
Cách sử dụng Trình Tạo Loader CSS
Trình tạo loader CSS dựng các chỉ báo tải động bằng CSS thuần — không ảnh, không JavaScript, không phụ thuộc. Chọn một trong mười kiểu, chỉnh kích thước, tốc độ, độ dày và màu sắc, rồi sao chép HTML và CSS đã tạo thẳng vào dự án của bạn.
- Chỉnh tham số chung bằng bốn điều khiển: Kích thước đặt khung của từng loader, Tốc độ đổi thời lượng hoạt ảnh, Độ dày điều khiển viền và bề rộng thanh, Màu tô mọi phần tử.
- Duyệt lưới: cả mười loader tiếp tục chạy hoạt ảnh trực tiếp theo cài đặt hiện tại nên bạn so sánh qua một cái nhìn. Nhấp vào loader bất kỳ để chọn.
- Bảng chi tiết hiển thị loader đã chọn to hơn, cùng đoạn HTML và CSS tương ứng (gồm cả @keyframes mà nó cần).
- Nhấn Sao chép HTML hoặc Sao chép CSS để gửi từng khối vào khay nhớ tạm. CSS tự chứa — dán vào bảng định kiểu và đặt HTML ở nơi loader cần xuất hiện.
- Thay bất kỳ tham số nào thì lưới, bản xem trước chi tiết và cả hai khối mã cập nhật ngay lập tức.
Vì là CSS thuần, loader gần như tốn không bao giờ băng thông và luôn sắc nét trên mọi màn hình. Kèm hoạt ảnh bằng nhãn văn bản để dễ tiếp cận, và tránh thời lượng dưới khoảng 0,5 giây — spinner nhấp nháy quá nhanh gây lo lắng hơn là trấn an.
Công cụ liên quan
- Trình nén CSS Trình nén CSS trực tuyến miễn phí. Nén và tối ưu hóa mã CSS ngay lập tức bằng cách loại bỏ khoảng trắng, nhận xét và ký tự không cần thiết. Giảm kích thước tệp để tăng hiệu suất web.
- Làm đẹp CSS Định dạng và làm đẹp mã CSS ngay lập tức. Chuyển đổi CSS đã nén thành mã dễ đọc với các tùy chọn tùy chỉnh.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.
- Trình tạo clip-path CSS Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.
- Trình tạo Border Radius CSS Trình tạo border-radius CSS trực quan. Điều chỉnh từng góc độc lập với xem trước thời gian thực và sao chép mã CSS ngay lập tức.