⏳

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.

Tất cả công cụ Browser-only

Mẫu loader

Size48px

Tốc độ1.0s

Màu

HTML

CSS

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 ring hoặc dots.
Page load spinner: 48-80px, đặt giữa màn hình.
Skeleton placeholder: dạng pulse hoặc bars trong card đang load.
Inline loading: dạng dots hoặc wave bê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ặc role="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ụ →

MỚI

🎨

Color Picker

Pick HEX/RGB/HSL, slider RGB, 12 màu mẫu, gợi ý tên Tailwind gần nhất.

MỚI

✨

CSS Animation Builder

Visual builder cho CSS animation. 10 preset (fadeIn, bounce, pulse, spin, shake…). Tinh chỉnh duration, easing, iteration.

MỚI

🪞

CSS Filter Builder

Visual builder cho CSS filter — blur, brightness, sepia, hue-rotate, drop-shadow. 8 preset (Vintage, Polaroid, Noir…).

MỚI

🎨

Color 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.