Trình tạo animation loading CSS

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách thiết kế một loader CSS

1. 01

   Chọn kiểu loader

   Mở Kiểu loader và chọn Vòng quỹ đạo cho một vòng xoay cổ điển hoặc Ba chấm cho bộ ba chấm nảy. Bản xem trước trực tiếp chuyển động theo từng thay đổi bạn thực hiện, và mỗi kiểu đều kèm @keyframes riêng khi bạn xuất.

2. 02

   Định cỡ khung và nét

   Dùng khung 24–160 px và nét hoặc chấm 2–20 px. Nét của vòng phải nhỏ hơn một nửa khung. Ba chấm phải vừa vặn với khoảng cách tối thiểu 2 px giữa chúng; nếu không, việc sao chép và tải xuống sẽ bị vô hiệu hóa. Kích thước xuất ra của vòng đã bao gồm đường viền.

3. 03

   Tinh chỉnh tốc độ và màu sắc

   Chọn Thời lượng chu kỳ từ 0,2 đến 4 giây theo bước 0,05 s. Màu hoạt động tô viền trên của vòng hoặc chấm giữa; Màu nền quỹ đạo tô phần còn lại của vòng hoặc hai chấm ngoài. Chu kỳ chậm trông như tác vụ nền thư thái; chu kỳ nhanh tạo cảm giác khẩn trương.

4. 04

   Hoặc bắt đầu từ mẫu có sẵn

   Nhấn Tải mẫu để áp dụng một thiết lập Ba chấm nổi bật — khung 72 px, chấm 12 px và chu kỳ 0,75 s với màu đỏ và vàng — làm điểm khởi đầu. Đặt lại luôn đưa về vòng quỹ đạo mặc định.

5. 05

   Sao chép hoặc tải xuống CSS

   Nhấn Sao chép CSS để đưa bộ quy tắc vào clipboard, hoặc Tải xuống .css để lưu toolars-loader.css. Bảng đầu ra hiển thị chính xác số byte bạn xuất, và cả hai nút đều bị vô hiệu hóa khi có giá trị nào chưa qua kiểm tra.

6. 06

   Kết nối vào markup của bạn

   Vòng quỹ đạo chỉ cần một phần tử mang class .loader; Ba chấm cần ba phần tử con span bên trong nó. Bản xuất kèm một khối prefers-reduced-motion để dừng hiệu ứng cho những người nhạy cảm với chuyển động.