ajwann/svg-loaders-react

🎨 Các animation loading SVG đẹp cho React — không phụ thuộc, chỉ từ 110 sao

Bộ sưu tập các thành phần React đẹp và nhẹ, biến đổi thư viện SVG Loaders gốc của Sam Herbert thành các component có thể tái sử dụng trực tiếp trong React.

svg-loaders-react là bản thích React không phụ thuộc bên nào của thư viện SVG Loaders nổi tiếng do Sam Herbert tạo ra. Dự án cung cấp 12 thành phần loading animation bằng SVG, hỗ trợ cả nhập khẩu toàn bộ hoặc từng thành phần riêng lẻ, phù hợp cho mọi dự án React cần hiệu ứng chờ đợi thanh lịch.

✨ Điểm nổi bật

• Zero-dependency: Không yêu cầu thư viện bên ngoài, giữ cho bundle luôn nhẹ.
• 12 thành phần đa dạng: Bao gồm Bars, Puff, Circles, ThreeDots, TailSpin... đáp ứng nhiều phong cách thiết kế.
• Hỗ trợ nhập khẩu linh hoạt: Có thể import tất cả hoặc từng component riêng lẻ tùy nhu cầu.
• Tùy chỉnh thông qua props: Mỗi component nhận bất kỳ thuộc tính SVG presentation nào như stroke, strokeWidth, strokeOpacity.
• Dễ dùng: Chỉ cần một vài dòng code để có ngay animation loading đẹp.

💡 Vì sao đáng chú ý

Không chỉ là cách thức biến SVG thành component, dự án còn giữ nguyên tính sạch và nhẹ của bản gốc — lý tưởng cho các ứng dụng React muốn thêm loading animation mà không làm tăng kích thước bundle. Với hỗ trợ đầy đủ các thuộc tính SVG qua props, bạn có thể dễ dàng điều chỉnh màu sắc, độ dày đường nét, độ trong suốt... chỉ bằng một vài thuộc tính.

---

#React #SVG #LoadingAnimation #OpenSource #TiniX