CSS Loader / Spinner Generator
8 mẫu loader CSS thuần (ring, dots, pulse, bars, wave, orbit, flip…). Chỉnh size, màu, tốc độ — copy HTML + CSS sẵn dùng. Không cần JavaScript hay thư viện.
CSS loader/spinner generator — không có JavaScript, không thư viện, chỉ vài KB CSS. Phù hợp loading state, button submit, skeleton.
Khi nào dùng?
- Submit button loading: nhỏ gọn 16-20px, dạng
ringhoặcdots. - Page load spinner: 48-80px, đặt giữa màn hình.
- Skeleton placeholder: dạng
pulsehoặcbarstrong card đang load. - Inline loading: dạng
dotshoặcwavebên cạnh text.
Pure CSS thay vì SVG/animation library?
- ✅ Không kéo JS dependency — vài KB CSS thôi.
- ✅ GPU-accelerated (chỉ
transform+opacity) — mượt 60fps. - ✅ Đổi màu/size bằng CSS variable rất dễ.
- ⚠️ Phức tạp hơn 8 preset này thường dùng SVG hoặc Lottie sẽ tốt hơn.
Tips
- Tốc độ: 0.6-1.2s là chuẩn cho UI. Quá nhanh (<0.4s) gây mệt mắt; quá chậm (>2s) khiến cảm giác lag.
- Accessibility: thêm
aria-label="Loading"hoặcrole="status"cho screen reader. - Respect motion preferences: wrap trong
@media (prefers-reduced-motion: no-preference) {...}.
Phù hợp với ai
Frontend dev, UI/UX designer, ai cần prototype visual nhanh hoặc sinh CSS chuẩn copy-paste cho dự án Tailwind/React/Vue.
Câu hỏi thường gặp
CSS sinh ra có dùng được với Tailwind không?
Có. Output là CSS chuẩn vanilla, paste vào file .css bất kỳ. Nếu dự án dùng Tailwind, có thể đặt vào layer @utilities hoặc theme override.
Có hỗ trợ trình duyệt cũ không?
Output dùng cú pháp CSS modern (custom properties, grid, gap). Hoạt động tốt trên Chrome/Firefox/Safari 2020+. IE11 KHÔNG được hỗ trợ.
Công cụ liên quan
Xem tất cả công cụ →Color Picker
Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.
MỚICSS Animation Builder
Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.
MỚICSS Filter Builder
Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).
MỚIColor Palette Generator
Sinh bảng màu hài hoà từ màu chính (HSL theory). 6 hệ: Monochromatic, Analogous, Complementary, Triadic… + 10 shades.