Lộ trình tác vụ / từ đầu vào đến kết quả
Cách thiết kế một loader CSS
- 01
Chọn kiểu loader
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: 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. 264 Mẫu · 24 Hình học × 11 Chuyển động · Danh mục · Màu
- 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.
- 03
Tinh chỉnh tốc độ và màu sắc
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: 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.
- 04
Hoặc bắt đầu từ mẫu có sẵn
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: 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.
- 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.
- 06
Kết nối vào markup của bạn
Các hướng dẫn này áp dụng cho mẫu cơ bản; mẫu trong thư viện có hình dạng, màu, cấu trúc HTML và thời gian riêng: 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. HTML chứa CSS hiện tại và ví dụ hoạt động. Điều khiển gốc hỗ trợ bàn phím.