klendi/react-top-loading-bar

⚡ react-top-loading-bar — Thanh tiến trình đang tải kiểu YouTube, siêu nhẹ cho React

Một thành phần React đơn giản, hoạt động như thanh loading ở góc trên màn hình giống YouTube, hỗ trợ điều khiển bằng hooks, ref hoặc state.

react-top-loading-bar là một thư viện React (viết bằng TypeScript) cung cấp thanh chỉ báo tiến trình ở phía trên cùng màn hình, mô phỏng hiệu ứng loading của YouTube. Phù hợp cho các ứng dụng React cần hiển thị trạng thái tải nhanh mà không cần thiết kế phức tạp.

✨ Điểm nổi bật

• useLoadingBar hook: khởi tạo và điều khiển thanh loading bằng start(), complete() và các phương thức khác.
• LoadingBarContainer: bọc toàn bộ ứng dụng để quản lý trạng thái loading toàn cục.
• Ref API: sử dụng ref để gọi trực tiếp các phương thức như continuousStart(), staticStart(), complete().
• State-driven: điều khiển tiến trình bằng prop progress từ 0 đến 100.
• Hai chế độ loading: continuous (tự động tăng ngẫu nhiên) và static (giữ nguyên giá trị).
• Tùy biến màu sắc, chiều cao, bóng đổ: dễ dàng cá nhân hóa giao diện.
• Phương thức tích hợp sẵn: start, complete, increase, decrease, getProgress.

💡 Vì sao đáng chú ý

Khác với các thư viện loading phức tạp, react-top-loading-bar tập trung vào một chức năng: hiển thị thanh tiến trình mỏng ở góc trên màn hình. Giao diện API linh hoạt (hooks, ref, state) giúp dễ dàng tích hợp vào bất kỳ dự án React nào. Đặc biệt hữu ích cho các trang SPA cần phản hồi nhanh khi chuyển trang hoặc gọi API.

#React #LoadingBar #TypeScript #UI #TiniX